Elegant Social Sharing Widget Below Post for Blogger Blog

steps

1. Login to your blogger blog.
2. Go to Template >> Edit HTML >>Back/Restore.
3. Now backup your blogger template before making any changes.
4. Now find ]]></b:skin> and paste the following code just above it.

/* copy from here */
#googleplus {
float: left;
width: 80px;
background: #D4503F;
height: 20px;
margin-right: 10px;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 2px 0 #ccc;
-webkit-box-shadow: 0 2px 0 #CCC;
box-shadow: 0 2px 0 #CCC;
}
#googleplus:hover {opacity:0.9;}
#retweet {
float: left;
width: 80px;
background: #51CDF6;
height: 20px;
margin-right: 10px;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 2px 0 #ccc;
-webkit-box-shadow: 0 2px 0 #CCC;
box-shadow: 0 2px 0 #CCC;
}
#retweet:hover{opacity:0.9;}
#fblike {
float: left;
width: 80px;
background: #4A65A1;
height: 20px;
margin-right: 10px;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 2px 0 #ccc;
-webkit-box-shadow: 0 2px 0 #CCC;
box-shadow: 0 2px 0 #CCC;
}
.fblike:hover{opacity:0.9;}
.stumble{
background-color:#10b3d0;
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 2px 0 #ccc;
-webkit-box-shadow: 0 2px 0 #CCC;
box-shadow: 0 2px 0 #CCC;
}
.stumble:hover{opacity:0.9;}
.more:hover{opacity:0.9;}
.more{
background-color:#f8ca12;
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 2px 0 #ccc;
-webkit-box-shadow: 0 2px 0 #CCC;
box-shadow: 0 2px 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;}<span style="font-family: Times New Roman;"><span style="white-space: normal;">

</span></span>

<!-- copy End -->

Now find <data:post.body/> and paste following code just above it.

<!-- copy start -->
<center>
<div id='googleplus'>
<a class='addthis_button_google_plusone' g:plusone:size='medium'></a>
</div>
<div id='retweet'><a class='addthis_button_tweet' tw:via='addthis'></a>
</div>
<div id='fblike'><a class='addthis_button_facebook_like' fb:like:layout='button_count'></a></div>
<div class='stumble'><a class='addthis_button_stumbleupon_badge'></a>
</div>
<div class='more'><a class='addthis_counter addthis_pill_style'></a></div></center>
<script src='http://s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'></script>
<br/>
<br/>
<div style='clear: both;'></div>
</div>
<!-- copy End -->

Posted in: blogger tips