WIDGET : Adding some pretty social buttons below titles

In this blogger widget today we will create awesome social sharing buttons widget below title of posts. Earlier I have shared some incredible social media widgets with you like Mashable like social sharing sidebar widget for blogger or Linkedin and other social sharing buttons for blogger else Twitter fan box like Facebook fan box for blogger. Today yet another social sharing widget for blogger below blog post titles. The best part of this widget is it's simplicity and it is located just below of post titles so that visitors can find it easily to share relevant blog posts on their social profiles with one click. So let start with the tutorial how to add pretty social sharing buttons below post titles.

How to add pretty social sharing buttons right below blogger post titles..

It is very pretty and you can customize it according to your template needs.Pl follow these steps if you are using blogger for your blog.

Step 1. Log in to blogger and go to your blog dashboard. Select Templates and edit html

Step 2. Find following code <data:post.body/>

Step 3. Just above it paste the following code..then save the template.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='background:#FFFF99; border:1px solid #FCFCFC; -moz-border-radius:9px; -webkit-border-radius:9px; border-radius:9px; padding:5px; box-shadow: 3px 3px 3px #000;'> <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;BWIDGETS 4 ALL&quot;, ui_header_color: &quot;#ffffff&quot;, ui_header_background: &quot;#0080FF&quot; } </script>
<!-- AddThis Button END --></td> </tr> </table></div> </b:if><br/>

Step 4. You can make changes in highlighted text above. Enjoy the widget and if you face any problem then drop your comments below.

Kindly Bookmark this Post using your favorite Bookmarking service: