Very Sexy Share Button Below Every Post

Posted by : ADMIN Monday, 5 December 2011

This widget is very popular today, you can see this widget just below the post title of many 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.

Go to Blogger Dashboard / Edit HTML.
Backup your Template, it is very necessary.
Click "Expand Widget Templates".
Then search for <data:post.body/>.
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/>