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. 

social share buttons under blog posts

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. 

social shar buttons under posts
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. 


jim luthra jimmie jamshed About Author
Jimmie Luthra is founder of The-Area51.com. He is a Cadet in Merchant Navy and a Part time Blogger. He is 20 and lives in Mumbai. You can Follow him on Twitter, Facebook and Google+
SHARE

About Jimmie Luthra

Jim Luthra is a Third Officer in Merchant Navy and Chief Editor of The-Area51.com, He is a Blogger, Guitarist, Painter, Book Lover, Tech Geek, Basket Ball Lover, Traveller and Fitness Freak. He loves Traveling and Adeventure Sports.
    Blogger Comment
    Facebook Comment