Upgraded and Trendy Social Media Sharing Buttons Below Post Titles

Social media sharing buttons like Facebook like, Google +, Twitter play a vital role in building and growing the visitors stream to your Blog. Previously i showed you how to add the Simple Social Media Sharing Widgets below title, I've updated that widget and made it look very stylish and catchy, you would simply love it. Let's add this widget to your Blogs

Live Demo

How to Add the New Stylish Sharing Widget

1. Go to Blogger >> Design >> Edit HTML.
2. Back up your Template.
3. Expand Widget Templates.
4. Search for <data:post.body/>
5. Place the following code just above it.

<!--GOOGLE+1-TWEET-FACEBOOK-STUMBLE-STARTS-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:5px;'>
<table border='0'>
<tbody><tr>
<td>
<div style='background:#CAE1CA; border:1px solid #ddd;  height: 1.8em; width: 6.5em; -moz-border-radius-bottomright: 25px 50px; border-bottom-right-radius: 25px 50px; box-shadow: 3px 3px 3px #CCCCCC; padding:4px; margin-right:25px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='mybloggertips' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
</td>
<td>
<div style='background:#CAE1CA; border:1px solid #ddd;  height: 1.8em; width: 6.5em; -moz-border-radius-bottomright: 25px 50px; border-bottom-right-radius: 25px 50px; box-shadow: 3px 3px 3px #CCCCCC; padding:4px; margin-right:25px;'>
<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;'/>
</div>
</td>
<td><div style='background:#CAE1CA; border:1px solid #ddd;  height: 1.8em; width: 6.5em; -moz-border-radius-bottomright: 25px 50px; border-bottom-right-radius: 25px 50px;; box-shadow: 3px 3px 3px #CCCCCC; padding:4px; margin-right:25px;'>
<script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>
</div>
</td>
<td>
<div style='background:#CAE1CA; border:1px solid #ddd;  height: 1.8em; width: 6.5em; -moz-border-radius-bottomright: 25px 50px; border-bottom-right-radius: 25px 50px; box-shadow: 3px 3px 3px #CCCCCC; padding:4px; margin-right:25px;'>
<g:plusone expr:href='data:post.url' size='medium'/>
</div>
</td>
</tr>
</tbody></table></div>
</b:if>

<!--GOOGLE+1-TWEET-FACEBOOK-STUMBLE-STOPS-->

   5. Note If you have already Added Google + button then skip this step. If not then Search for ]]></b:skin> and below it add the following code:

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>

Customization

You can Customize the Background color, simply change #CAE1CA to whatever code you would like.

That's all , You are done. :)