Social Media Sharing Buttons Below Blog Posts Title

Today I'm gonna Show you the tutorial on how to add the top social media sharing buttons just below the post titles in Blogger blogs. Social Media sharing buttons are quite important for any blog because it can boost you traffic. The sharing widget includes Google + 1,Facebook like, Re-Tweet, Facebook share and Stumble Upon Buttons. If you need to, you can remove a button and add any other button to the widget. Both Wordpress and Blogger users can add this sharing widget. So lets add the precious buttons to your blogs.

         How to Add the Social Media Sharing Buttons Below Titles?

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.

1. 
   <!--GOOGLE+1-TWEET-FACEBOOK-STUMBLE-STARTS-->
   
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div style='padding:4px;'>
   <table border='0'>
   <tbody><tr>
   <td>
   <div style='margin-right:10px;'>
   <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='margin-right:10px;'>
   <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='margin-right:10px;'>
   <g:plusone expr:href='data:post.url' size='medium'/>
   </div>
   </td>
   <td><div style='margin-right:10px;'>
   <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>  
   <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
   </div>
   </td>
   <td>
   <div style='margin-right:10px;'>
   <script expr:src='&quot;http://www.stumbleupon.com/hostedbadge.php?s=1&amp;r=&quot; + data:post.url'/>
   </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>

That's all , You are done. :)


Peace and Happy Blogging!