Add Social Share Buttons Below All Blogger Posts

Social networking is very important for bloggers these days, It helps bloggers in many ways like getting visitors, earning reputation on social media, increasing the number of fans etc. Spreading blog posts all over social networks can really help increasing number of fans and followers which will help you get more visits on your blog. 

You must have seen Social sharing buttons below blog posts on many websites and blogs. This is a great way to get maximum clicks, Every visitor after reading your article will try to share your article and Adding buttons to footer helps in more shares. Today I'm going to show you a way for adding such buttons below your blog posts.

How to Add Social Share Buttons Below Blog Posts.

Here is a step by step guide for adding social share buttons in footer or blog posts. The Installation is very easy and anyone can do it without any problems. 

Here is How it will Look

Step 1: Go to Blogger Dashboard > Template. (It is always recommended to backup template before making any changes)

Step 2: Click on Edit HTML then Proceed.

Step 3: Ctrl + F and Find this code <div class='post-footer'> 

Step 4: Paste the following code below the above code.

<!-- The-Area51.com Social Share BEGIN -->

<b:if cond='data:blog.pageType == &quot;item&quot;'><style>
#googleplus {
float: left;
width: 80px;
height: 20px;
margin-right: 10px;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0px 0 #ccc;
-webkit-box-shadow: 0 0px 0 #CCC;
box-shadow: 0 0px 0 #CCC;
}
#googleplus:hover {opacity:0.9;}
#retweet {
float: left;
width: 80px;
height: 20px;
margin-right: 10px;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0px 0 #ccc;
-webkit-box-shadow: 0 0px 0 #CCC;
box-shadow: 0 0px 0 #CCC;
}
#retweet:hover{opacity:0.9;}
#fblike {
float: left;
width: 80px;
height: 20px;
margin-right: 10px;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0px 0 #ccc;
-webkit-box-shadow: 0 0px 0 #CCC;
box-shadow: 0 0px 0 #CCC;
}
.fblike:hover{opacity:0.9;}
.stumble{
width: 70px;
height: 20px;
float:left;
margin-right: 30px;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0px 0 #ccc;
-webkit-box-shadow: 0 0px 0 #CCC;
box-shadow: 0 0px 0 #CCC;
}
.stumble:hover{opacity:0.9;}
.more:hover{opacity:0.9;}
.more{
width: 70px;
height: 20px;
float:left;
margin-right: 30px;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0px 0 #ccc;
-webkit-box-shadow: 0 0px 0 #CCC;
box-shadow: 0 0px 0 #CCC;
}
.addthis_button_google_plusone{opacity:1;}
.addthis_button_google_plusone:hover{opacity:1;}
.addthis_button_tweet{opacity:1;}
.addthis_button_tweet:hover{opacity:1;}
.addthis_button_facebook_like{opacity:1;}
.addthis_button_facebook_like:hover{opacity:1;}
.addthis_button_stumbleupon_badge{opacity:1;}
.addthis_button_stumbleupon_badge:hover{opacity:1;}
</style>
<div id='googleplus'>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
</div>
<div id='retweet'><a class='addthis_button_tweet' tw:via='addthis'/> </div>
<div id='fblike'><a class='addthis_button_facebook_like' fb:like:layout='button_count'/></div>
<div class='stumble'><a class='addthis_button_stumbleupon_badge'/> </div>
<div class='more'><a class='addthis_counter addthis_pill_style'/></div>
<script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/> </b:if>
<!-- The-Area51.com Social Share END -->

Step 5: Now Save the Template.

This will add social sharing buttons under all your blog posts. This will surly increase sharing. I Hope you guys like this widget Please let me know by leaving comments below.