Custom Social Media Follow Widgets For Blogger Templates

Share:
Adding a Social Media Follow Widgets to your blog template, not only add beauty to the blog design, but also help to increase the number of your social media followers. In this post, we will share with you two beautiful Custom Social Media Follow Widgets you can add to your Blogger Templates to increase the number of your followers.  

How To Add Social Media Follow Buttons In Blogger

Login to your blogger account > Go to the Template section > Click on the “Edit HTML” > Find the ending </head> code of your template.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
 Then code and paste the above code right before the ending </head> code and then click save.

Now go to the “Layout” section. Go to the sidebar section and find the “Add a Gadget” link. Click on it. (These social media follow buttons are responsive so you can add anywhere in your blog but I will recommend you to add it in the sidebar). Scroll down and select “HTML/JavaScript” gadget. Click to add it.

1) Social Media Follow Widget One


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>

2) Social Media Follow Widget Two


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: You must replace the highlighted “#” with your social profile or page URL for both widget while for the second one, replace every highlighted “numbers” with your own social followers, numbers.

No comments