Friday, December 29, 2017

5+ Widgets: Social Media Follow Buttons For Blogger

Social media follow buttons for blogger will let your readers follow your social pages and profiles within a click. All of these widgets contain some amazing social follow buttons for blogger of most popular social media services like Facebook, twitter, google plus etc. Actually, these widgets are designed to connect social pages and profiles with your blog. Each widget will also contain social media icons.

Some of these widgets will show the total number of followers for a specific social media service. In addition, these HTML and CSS social follow buttons are 100% responsive. In fact, these are optimized for different screen resolution for improving the user experience. 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.

As I have told you that these simple widgets are designed with HTML and CSS so you can use these not only for blogger but also for any other CMS including WordPress. At this point, I will show you the entire process of adding these social media follow buttons for blogger in your blog. But before that, I should inform you why social media icons and widgets are important for blogging.

Why should we use social media follow buttons?

Obviously, every blogger needs to improve user engagement of their blog. Moreover, a strong community of readers is a key to blogging success. Even social activity is also loved by search engines. So it is very important for a blogger to create a strong community on social media.

Adding social media follow buttons and social media icons in blogger will let your reader follow you or your business directly from your website. Also, they will be notified about any update you have shared on your social profile. If you write excellent content, people will start becoming your fan and they will need to follow you. As a matter of fact, you can easily utilize this opportunity by adding social media follow buttons on your blog.

Not only you should add social media follow buttons but also social media share buttons below every post of your blog. You should let your readers share their favorite content with their friends easily. Bloggers can have this kind of promotion for free.

How To Add Social Media Follow Buttons In Blogger?

I am going to provide some custom social media follow buttons for blogger. Actually, adding these widgets are pretty easy. Here is the instruction:

At first, we have to import the font awesome icon set on our blogger blog. Without this, you will not be able to see any social media icons. To do this,

Login to your blogger account > Go to the Template section > Click on the “Edit HTML” > Find the ending </head> code of your template.


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

Now copy the above code and paste it right before the ending </head> code. Click on the save template button and you are done. So it’s time to add the social media widget.

1. Now go to the “Layout” section.
2. 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)
3. Scroll down and select “HTML/JavaScript” gadget. Click to add it.
4. Now chose your desired social media widget for blogger from the below list and paste it as shown.

Note: You must replace the highlighted “#” with your social profile or page URL.

5. Finally, click on the “Save” button. Go to your blog and reload it. You will see the widget is live on your blog.

List of Social Media Follow Buttons For Blogger:

Here is some amazing social media follow buttons for blogger to add some beautiful social media icons. At this point, chose whatever widget you like and add it to your blogger blog. All of these widgets are tested so there should not be any issue in the case of adding these.


Social Media Follow Buttons 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>

Configuration:

Replace every highlighted “#” with your own social media page or profile URL like (https://facebook.com/techornate)
This widget contains some simple but very attractive social media follow buttons for blogger. I personally love this because this widget will represent all major social links including Facebook, Twitter, Pinterest etc. Basically, it will show 6 major social links with their logo icons.

Actually it is designed for your blogger sidebar for the width 300px – 350px. In fact, it is a standard size of a website’s sidebar. Whatever template (Responsive, Personal, Magazine style etc) you are using doesn’t matter, It will suit them perfectly.


Social Media Follow Buttons Widget Style 2

<style>
ul.techornate-follow-buttons a:hover{color:#03c9a9}.techornate-follow-buttons.b-title li{text-align:center;background-color:#fff;width:31.5%;border:1px solid #eee}.techornate-follow-buttons.b-title a{text-transform:uppercase;text-decoration:none;margin:20px auto 0;font-size:10px}.techornate-follow-buttons li{display:inline-block;padding:0 0 7px;margin-bottom:3px!important}.techornate-follow-buttons li:last-child{border-bottom:1px solid #eee!important;padding-bottom:7px!important}.techornate-follow-buttons.b-title i{margin:0 auto 10px;display:block}.techornate-follow-buttons.style-1 i{height:32px;width:32px;line-height:32px;font-size:20px;margin:10px auto 0;text-align:center;color:#333}
</style>
<ul class='techornate-follow-buttons style-1 b-title'>
<li><a href='#'><i class="fa fa-facebook"></i>facebook</a></li>
<li><a href='#'><i class="fa fa-twitter"></i>twitter</a></li>
<li><a href='#'><i class="fa fa-google"></i>google +</a></li>
<li><a href='#'><i class="fa fa-pinterest"></i>pinterest</a></li>
<li><a href='#'><i class="fa fa-linkedin"></i>linkedin</a></li>
<li><a href='#'><i class="fa fa-instagram"></i>instagram</a></li>
</ul>

Social Media Follow Buttons Widget Style 3

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

Social Media Follow Buttons Widget Style 4

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

Social Media Follow Buttons Widget Style 5
<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>
  • Replace every highlighted "#" with your own social media page or profile URL like (https://facebook.com/freebloggerthemes)
  • Replace every highlighted "numbers" with your own social followers, fans and YouTube subscriber numbers.


Also, the static share count will show your readers the popularity of your pages. Presently it contains Facebook, twitter, google plus and YouTube icons (Follow Buttons) but you can replace or add many other by asking for the modification in the comment section. In my opinion, this one is the best social media follow buttons widget for blogger.

Hopefully, you have added one of these widget to show social media follow buttons for blogger without having any issue. Also, you can share this article to support me and subscribe this blog for getting the update.


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner