Tweaking AddThis Button's position for Blogger

The code provided by AddThis allowed the button to be placed at the bottom of each blog posts. But I did not like the location, I wanted it to be aligned nicely on the right hand side of the "comments" link.

While I quickly figured out how to move the button to the position, the vertical alignment of the button was off by a few pixels. Being not so familiar with CSS, it took me a long time to finally solve this issue.


Step 1
Get the code from AddThis

Step 2
In Blogger, go to Layout > Edit HTML, and paste the code immediately below these lines:

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>

Step 3
To make the button align with the elements in footer, change the code below...

<!-- AddThis Button BEGIN -->
<div><a expr:addthis:title='data:post.title' expr:addthis:url='data:post.url' class='addthis_button'><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pub=edwinliu"></script></div>
<!-- AddThis Button END -->

...to this:

<!-- AddThis Button BEGIN -->
<span><a expr:addthis:title='data:post.title' expr:addthis:url='data:post.url' class='addthis_button'><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0;padding:0 5px;vertical-align:text-bottom;"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pub=edwinliu"></script></span>
<!-- AddThis Button END -->

Add Tweet This to Blogger

While searching for a tweeter button as shown on the right hand side of this post, I've checked out several tutorials on the web, and the solution from the link below is probably the easiest & prettiest one I've seen.

Add Tweet This and Retweet To Blogger Posts