How to Add Social Media Follow Buttons Widget to Blogger

In this post, I will show you how to add social media follow button widget to your Blogger blog. Social media buttons will let your readers follow your social pages and profiles. Here you get the most popular social media buttons services like Facebook, twitter, google plus etc.
Add social media widget in Blogger


These social follow buttons widgets are designed with HTML and CSS, which are 100% responsive. For the blogger, maximum custom blogger templates come with social follow buttons and social media widgets. But if you don’t like them, you may choose one of these amazing social media follow buttons for blogger.

I will show you the complete process of adding these social media follow buttons for blogger.


How to Add Social Media Buttons to Blogger

Step 1:
Theme section edit HTML

First Login to your blogger account and Go to the Template section. Here Click on the Edit HTML button.


Step 2:
Html section

Click anywhere in the HTML Code and Press Ctrl+F. Then a search box will open, here you type "</head>" code of your template and hit enter.

Step 3:
paste code before head end

Now copy the code I provided below and paste it right before the ending </head> code. Click on the save template button. 

Code<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

Now its Done!!!!!!  Moving to the second part of the settings.  

1. Now go to the “Layout” section of the blogger.

2. In the sidebar section click on “Add a Gadget”. 

layout section


3. Scroll down and Click on “HTML/JavaScript” gadget.

Add a gadget popup

4. Now choose your desired social media Widget Style code (Style 1, 2, 3 and 4) for a blogger from the list below and paste the code into the Content box.

5. Finally, click on the “Save” button. Click "save arrangements". You're done, Go to your blog and reload it. You will see the widget is live on your blog.
Html/ javascript area


List of Social Media Buttons Custom Code

Here are some amazing social media follow buttons for a blogger to add some beautiful social media icons. At this point, chose whatever widget you like and add it to your blogger blog. From the widget style copy anyone HTML code for social media icons blogger.


Widget Style 1:
rectangle social button

Code:

<style> 
.to-social-follow{width:300px;padding:10px;margin:0}.to-social-follow .fa{font-size:18px;padding:16px;text-align:center;margin:5px 2px;width:20%;text-decoration:none;color:#fff}.to-social-follow .fa:hover{opacity:.7}.to-social-follow .fa-facebook{background:#3B5998}.to-social-follow .fa-twitter{background:#55ACEE}.to-social-follow .fa-google{background:#dd4b39}.to-social-follow .fa-linkedin{background:#007bb5}.to-social-follow .fa-youtube{background:#b00}.to-social-follow .fa-instagram{background:#125688}.to-social-follow .fa-pinterest{background:#cb2027}
 </style> 
<div class="to-social-follow"> 
<a href="#" class="fa fa-facebook" target="_blank"></a> 
<a href="#" class="fa fa-twitter" target="_blank"></a> 
<a href="#" class="fa fa-google" target="_blank"></a> 
<a href="#" class="fa fa-linkedin" target="_blank"></a> 
<a href="#" class="fa fa-youtube" target="_blank"></a> 
<a href="#" class="fa fa-pinterest" target="_blank"></a>
 </div>


Note: Replace every highlighted Red colour “#” with your own social media page or profile URL like (https://facebook.com/gadgetinfluencer). 

In case if you don't need any of the social media icons then you can delete it by removing the entire code in <a> tag. Suppose delete Pinterest icon then remove "<a href="#" class="fa fa-pinterest" target="_blank"></a>" from the list.


Widget Style 2:

Bar social button


Code:

<style> 
.techornate-social-buttons ul{padding-left:0;list-style:none}.techornate-social-buttons li a{text-transform:uppercase;text-decoration:none;padding:10px 1px 10px 10px;letter-spacing:2px;font-size:10px;color:#fff;display:block;border-radius:3px}.techornate-social-buttons ul li{margin-bottom:10px;width:100%}.techornate-social-buttons li a i{width:35px;height:14px;float:right;padding:0 0 0 10px;margin:0;font-size:14px;line-height:14px;border-left:1px solid #B1B1B1}.techornate-social-buttons li a.social-btn-facebook{background:#3b5998}.techornate-social-buttons li a.social-btn-twitter{background:#1da1f2}.techornate-social-buttons li a.social-btn-youtube{background:#cd201f}.techornate-social-buttons li a.social-btn-instagram{background:#405de6}.techornate-social-buttons li a.social-btn-google{background:#dd4b39} 
</style> 
<div class="techornate-social-buttons"> 
<ul class="sidebar-social clearfix">
<li><a href="#" class="social-btn-facebook">Like on Facebook <i class="fa fa-facebook"></i> </a></li> 
<li><a href="#" class="social-btn-twitter">Follow on Twitter <i class="fa fa-twitter"></i> </a></li> <li><a href="#" class="social-btn-google">Follow on Google+ <i class="fa fa-google"></i> </a></li> 
<li><a href="#" class="social-btn-instagram">Follow on Instagram <i class="fa fa-instagram"></i> </a></li> 
<li><a href="#" class="social-btn-youtube">Subscribe on Youtube <i class="fa fa-youtube"></i> </a></li>
</ul> 
</div>

Note: Replace every highlighted Red colour “#” with your own social media page or profile URL like (https://facebook.com/gadgetinfluencer).


Widget Style 3:
rectangle with followers count social button
Code:

<style> 
ul.techornate-social-share{padding:0;margin:0;overflow:hidden}ul.techornate-social-share li{list-style:none;float:left;margin-right:4%;width:48%;margin-bottom:10px;background:#fafafa;overflow:hidden}ul.techornate-social-share li a{text-decoration:none;display:inline-block;float:left;color:#fff;height:40px;width:40px;text-align:center;font-size:14px;line-height:40px;margin-right:16px;position:relative;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out}ul.techornate-social-share li a:after{height:0;width:0;top:50%;left:100%;content:'';margin-top:-4px;position:absolute}ul.techornate-social-share li a.facebook{background:#436feb}ul.techornate-social-share li a.facebook:after{border:4px solid #436feb;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.twitter{background:#43c9eb}ul.techornate-social-share li a.twitter:after{border:4px solid #43c9eb;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.google{background:#f14133}ul.techornate-social-share li a.google:after{border:4px solid #f14133;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.youtube{background:#b00}ul.techornate-social-share li a.youtube:after{border:4px solid #b00;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a:hover{opacity:.7}ul.techornate-social-share li span{font-size:12px;margin:0;line-height:15px;color:#999;font-weight:700;display:block}ul.techornate-social-share li span.scount-number{margin-top:5px;color:#333}ul.techornate-social-share li:nth-child(2n){margin-right:0} </style> 
<ul class="techornate-social-share"> 
<li> <a href="#" class="facebook"><i class="fa fa-facebook"></i></a> <span class="scount-number">44,143</span> <span>Fans</span></li> 
<li> <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> <span class="scount-number">39,505</span> <span>Followers</span></li> 
<li> <a href="#" class="google"><i class="fa fa-google-plus"></i></a> <span class="scount-number">25,203</span> <span>Followers</span></li> 
<li> <a href="#" class="youtube"><i class="fa fa-youtube"></i></a><span class="scount-number">7,456</span> <span>Subscribers</span></li> 
</ul>


Note: Replace every highlighted Red colour “#” with your own social media page or profile URL like (https://facebook.com/gadgetinfluencer).

Replace every highlighted “numbers” with your own social followers, fans and YouTube subscriber numbers. 



Widget Style 4:
Bar with followers count social button

Code:

<style> 
.s-text strong,.social-counter{font-weight:900}.techornate-socials a{display:block;color:#fff;padding:12px 15px;position:relative;margin-bottom:5px;text-decoration:none}.techornate-socials a span,.techornate-socials a:before{z-index:2;position:relative}.social-counter{position:absolute;font-size:14px;line-height:1;padding-top:4px}.s-text{float:right}.techornate-socials a:after{content:" ";height:100%;width:0;top:0;left:0;position:absolute;background:#252b42;z-index:1}.fa-facebook:before,.fa-subscribe:before,.fa-twitter:before{display:inline-block;width:16px;font-family:FontAwesome;margin-right:10px;padding-right:10px;font-size:18px;border-right:1px solid rgba(255,255,255,.3)}.fa-facebook{background:#1c3e67}.fa-facebook:before{content:"\f09a"}.fa-twitter{background:#28a6c5}.fa-twitter:before{content:"\f099"}.fa-subscribe{background:#d2002c}.fa-subscribe:before{content:"\f167"} 
</style> 
<div class="techornate-socials"> 
<a target="_blank" href="#" class="fa-facebook"><span class="social-counter">146,200</span><span class="s-text">Follow us on <strong>Facebook</strong></span></a> 
<a target="_blank" href="#" class="fa-twitter"><span class="social-counter">50,748</span><span class="s-text">Follow us on <strong>Twitter</strong></span></a> 
<a target="_blank" href="#" class="fa-subscribe"><span class="social-counter">33,175</span><span class="s-text">Subscribe us on <strong>YouTube</strong></span></a> 
<div class="clear">
</div> 
</div> 

Note: Replace every highlighted Red colour “#” with your own social media page or profile URL like (https://facebook.com/gadgetinfluencer).
Replace every highlighted “numbers” with your own social followers, fans and YouTube subscriber numbers.

Conclusion

So that's it, a complete tutorial how to Add Social Media Follow Buttons Widget to Blogger. If you enjoyed this tutorial then please share this article with your friends. Also, if you face any problem in following this tutorial, feel free to leave a comment. I will try my best to solve your query.


13 comments:

  1. I'm for sure no expert, but having a reasonable level of knowledge in using Windows Movie Maker (or similar video editing software) can turn that video file straight from the camera into a beautiful, YouTube-ready video.https://edkentmedia.com/social-media-marketing/

    ReplyDelete
  2. Hi sir Keep Your Support PLz Supporting Me PLz Sir

    ReplyDelete
  3. I love this blog!! The flash up the top is awesome!! Shane Perry Marketing

    ReplyDelete
  4. I used widget style 3 its appearing there on my page but facebook youtube logos not there ..

    ReplyDelete
  5. Succeed! It could be one of the most useful blogs we have ever come across on the subject. Excellent info! I’m also an expert in this topic so I can understand your effort very well. Thanks for the huge help. www.gadgetcouncil.com

    ReplyDelete
  6. Nice article thanks you for sharing

    ReplyDelete
  7. DEAR SIR,
    YOUR ALL ARTICAL ARE VERY GOOD AND ANYONE CAN UNDERSTAND EASILY

    ReplyDelete
  8. Hi. bro
    very nice article, keep up the good work

    ReplyDelete

Powered by Blogger.