How to add AddThis below blog title for Blogger

Today, I am going to give you a blogging trick for Blogger - How to add AddThis social bookmarking icons just below your each blog titles with exact spacing.

I have been trying it out for quite some time and was unable to bring AddThis just below the blog title with equal spacing. There are many websites out there in Google providing great knowledge but none of them came to my rescue.

Finally after playing a lot with html codes, I was able to successfully get the things in Order. And here I am to share this trick with you.

For those who are unaware of "AddThis" widget, it is a social bookmarking facility & provides options such as Facebook Like button, Tweet, Google+1 button & whole list of other providers.

Following are the steps to be followed carefully - 

1. Go to www.addthis.com
2. Register with them & click GetAddThis
3. Do not install the widget for Blogger/Wordpress to your blog.
4. Now Click on Sharing Tools (You should see this screen as shown beside)
5. Click on your Desired Style (Lot of Options are given)
6. On your Right Side, Copy(Grab It) the snippet html code. Please remember to register before doing this as the snippet contains your publisher id. The code should like this - 

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f4cce484b6a0b2f"></script>
<!-- AddThis Button END -->

• Now go to Blogger --> Template --> Backup/Restore --> Download Backup Copy
• Important - Please take a backup before changing any details on Html File so that if you make any wrong changes, you can again restore back your blog structure.
• Click on Edit Html again --> Proceed
• Tick the "Expand Widget Templates" so that you can search through the widget codes & make changes.
• Using CTRL + F (Find Option); Find this without quotes "<data:post.body/>" You may find it 1-2 times depending on your blog structure. You can place the AddThis code before any one of it. See the snapshot for more clarity. 
• You would be now able to see this code just before <data:post.body/> <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>(See the image beside)
• Now paste the "AddThis" code before this code viz;   <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

• Save the Template & check your blog to see whether social bookmarking buttons are placed properly        below your each & every blog title.
• For more blogging tricks, subscribe to my blog & go through this category to know more.