Add a Stylish Social Media Follow Widget to Blog without Plugin

social follow widget

Add a stylish social media follow button to your blog without a plugin, Learn How to add Social media button to blogger and wordpress. Hello Friends! How are you? In my Previous post i have already mentioned Top 10 Premium Looking Free Blogger Template (SEO Ready). After that Today in this post i am going to share Beautiful Stylish Social Media Follow widget without plugin. If you have not added any awesome social media widget to your website or blog yet, then you no longer need to take a tension, because in this tutorial, we will tell you how to add Beautiful Social Media Follow Button to your blog.

The best thing about it is whether your blog is made on Blogger or WordPress it work for all platforms, as well as mobile responsive.social follow widget

By adding a custom and beautiful looking social media buttons widget without plugin to blogs has a different impression on Visitors. It very Important to add a Social Media Widget to any blog or site so that any visitor can easily connect with you on social media sites. in which Increase your followers easily, so that your social media traffic is also improved. Here is a very beautiful social media follow widget without plugin as like below image which you can use it to your blog.

Social Media Follow Widget

In this post, I will tell you Step-by-Step Tutorial on how to add this social media follow buttons in both WordPress or blogger.

How to Add Social Media Follow Widget to Blogger Blog

If you want to add this social media widget to your blogger blog then follow below steps carefully.

Step#1 – Go to Your Blogger Dashboard.

Step#2- Click Theme Option from Left side menu and Click Edit HTML.

add-social-media-widget-blogger

Step#3- Press Ctrl+F and Find </head> Section in you Theme, and Copy below code and past it before the </head> tag.

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css” />

Step#4- After Successfully Add this code Save your Theme.

Step#5- Click Layout Option from the left side menu of your blogger dashboard.

Step#6- Click Add a Gadget from the Sidebar Section and Choose HTML/JavaScript.

Step#7 – Copy below code and Past into your widget section and Type the Title of you widget.

<style> .widget_social_apps { margin-left : -1%; margin-right : -1%; }
.widget_social_apps:after { clear : both; } .widget_social_apps .app_social { margin : 1% 0.5%; width : 49%; height : 45px; float : left; text-align : center;
background-color : #000; transition : all 0.2s; border-radius: 5px; }
.widget_social_apps .app_social.facebook { background-color : #4267b2; }
.widget_social_apps .app_social.twitter { background-color : #1DA1F2; }
.widget_social_apps .app_social.pinterest { background-color : #C92228; }
.widget_social_apps .app_social.instagram { background-color : #af2d9e; }
.widget_social_apps .app_social.google { background-color : #e24d3b; }
.widget_social_apps .app_social.linkedin { background-color : #0d6a96; }
.widget_social_apps .app_social.flickr { background-color : #ea097d; }
.widget_social_apps .app_social.youtube { background-color : #b5170a; }
.widget_social_apps .app_social.rss { background-color : #e07706; }
.widget_social_apps .app_social.tumblr { background-color : #5c6682; }
.widget_social_apps .app_social:hover { background-color : #cacaca; }
.widget_social_apps .app_social a { display : block; color : #ffffff; padding : 15px 5px; }
.widget_social_apps .app_social span { display : block; }
.widget_social_apps .app_social span.app_icon i { font-size : 12px; margin-bottom : 10px; }
</style>
<div class=”widget_social_apps”>
<div class=”app_social facebook”> <a href=”https://www.facebook.com/banshidharinfo” target=”_blank” title=”Follow on facebook”> <i class=”fa fa-facebook” aria-hidden=”true”></i> 1250 Likes</span></a></div>
<div class=”app_social twitter”> <a href=”https://twitter.com/Banshidharinfo” target=”_blank” title=”Follow on twitter”> <i class=”fa fa-twitter”></i> 12 Followers</span></a></div>
<div class=”app_social pinterest”> <a href=”https://in.pinterest.com/Banshidharinfo/” target=”_blank” title=”Follow on pinterest”> <i class=”fa fa-pinterest”> 13 Followers</i></span></a></div>
<div class=”app_social instagram”> <a href=”https://www.instagram.com/Banshidharinfo/?hl=en” target=”_blank” title=”Follow on instagram”> <i class=”fa fa-instagram”></i> 345 Followers</span></a></div>
<div class=”app_social google”> <a href=”https://plus.google.com/b/Banshidharinfo” target=”_blank” title=”Follow on google+”> <i class=”fa fa-google-plus”></i> 10 Followers</span></a></div>
<div class=”app_social linkedin”> <a href=”https://www.linkedin.com/company/Banshidharinfo” target=”_blank” title=”Follow on linkedin”> <i class=”fa fa-linkedin”> 43 Followers</i></span></a></div>
<div class=”app_social flickr”> <a href=”#” target=”_blank” title=”Follow on flicker”> <i class=”fa fa-flickr”></i> 0 Followers</span></a></div>
<div class=”app_social youtube”> <a href=”http://www.youtube.com/c/Banshidharinfo” target=”_blank” title=”Subscribe on youtube”> <i class=”fa fa-youtube”></i> 13 Subscribers</span></a></div>
<div class=”app_social rss”> <a href=”http://feeds.feedburner.com/Banshidharinfo” target=”_blank” title=”Subscribe blog feed”> <i class=”fa fa-rss”></i> 974 Subscribers</span></a></div>
<div class=”app_social tumblr”> <a href=”https://www.banshidharinfo.tumblr.com/” target=”_blank” title=”Follow on tumblr”> <i class=”fa fa-tumblr”></i> 10 Followers</span></a></div> </div>

Step#8- Replace all the “Banshidharinfo” Social Media User name with your user name from the above code and Click Save Button.

social-follow-widget

Step#9- You have Successfully Add the Social Media Follow Buttons on your Blog.

Also Read-
Top 10 Popular Social Media Sites to Promote Your Business
Free 40+ High PR Dofollow Directory List to Get Backlink
Top 4 Benefits to Installing Alexa Toolbar for Blogging
Different Between BlogSpot VS WordPress-Which is better?

How to Add Social Media Follow Widget to WordPress Blog without Plugin.

If you want to add this social media widget to your WordPress blog then follow below steps carefully.

Step#1- Log In to Your WordPress Dashboard.

Step#2 – Go to Appearance>Editor and click Header.php Section.

Step#3- Press Ctrl+F and find </head> Section.

Step#4- Copy the below code and Past it before the </head> tag.

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css” />

Step#5- Save your Changing.

Step#6- Now Go to Appearance>Customize>Widget>Sidebar and Choose Text Widget. Copy the Social Icon code that’s already mentioned in Blogger step and Past it.

Step#7- Enter the Widget Title and Click Save and Publish Button.

Step#8- Now you have Successfully add social media follow button to your wordpress blog.

I hope this tutorial of Stylish Social Media Follow Widget to Blog is very helpful to all of you if you like this post share it with your friends via social media, and if you have any questions regarding this post then you can ask with me in below comment box.

Did You Enjoy this Article ?

If yes, Then enter your email below to get more such great articles in your inbox For FREE !

About Akhilesh Kumar 90 Articles
Hi Guys, I am Akhilesh Kumar, a professional-blogger from Jharkhand, India. Here at BanshidharInfo I write about Blogging, SEO, WordPress, Social-media, Technology and Making Money online.

Be the first to comment

Leave a Reply

Your email address will not be published.


*