How to Add Social Media Follow Buttons Widget to Blogger 2019

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.

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:

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


Step 2:

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:

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”. 

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

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.

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:

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:

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://www.facebook.com/Anyonymousteacher).
Widget Style 3:

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://www.facebook.com/Anyonymousteacher).
Replace every highlighted “numbers” with your own social followers, fans and YouTube subscriber numbers. 



Widget Style 4:

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://www.facebook.com/Anyonymousteacher).
Replace every highlighted “numbers” with your own social followers, fans and YouTube subscriber numbers.