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 -->