Very Sexy Share Button Below Every Post

This widget is very popular today, you often see this widget just below the post title of Blogs. It includes popular social networking buttons like Twitter, Facebook like, Google +1 and StumbleUpon. You can easily customize background color  and overall look of the widget. It has a great importance in boosting your Blog traffic.So lets start to add this gorgeous share button to the Blog.

Add Social Sharing Button below Post :-

1. Go to Blogger Dashboard /  Edit HTML.
2. Backup your Template, it is very necessary.
3. Click "Expand Widget Templates".
4. Then search for <data:post.body/>.
5. Paste the following code just above it.

---

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='background:#FEE6E6; border:1px solid #ddd; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; padding:5px; box-shadow: 3px 3px 3px #CCCCCC;'> <table border='0'> <tr>

<td><!-- Twitter -->

<a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'/> <b:if cond='data:post.isFirstPost'> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'> </script> </b:if> </td>

<td><!--Facebook-->

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/> </td>

<td><div style='margin-right:25px;'><!-- STUMBLE UPON -->

<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/></div> </td> <td><div style='margin-right:5px;'><!-- GOOGLEPLUS --> <g:plusone expr:href='data:post.url' size='medium'/> </div> </td>

<td><!-- AddThis Button BEGIN -->

<div class='addthis_toolbox addthis_default_style '> <a class='addthis_counter addthis_pill_style'/> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4de3b2d654f56f28' type='text/javascript'/> <script type='text/javascript'> var addthis_config = { ui_cobrand: &quot;MY BLOGGER TRICKS&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; } </script>

<!-- AddThis Button END --></td> </tr> </table></div> </b:if><br/>

---

To Change the Background color of the container simply change #FEE6E6;. If find any difficulty then make comment I will launch you shortly.

If you enjoyed this article then kindly take 5 seconds to share it!!