How To Add Sleek And Custom AddThis Widget Below Blogger Post

There’s 100% chance that you are already noted with AddThis, even if you are not a blogger. It is the mostly used social sharing platform. A lot of sites are using this. AddThis is the world's largest content sharing platform. It gives end users a simple and easy way to share content across the social web, and provides publishers with increased web traffic and in-depth analytics. AddThis is the world's largest content sharing and social insights platform: It provides Easy-to-use tools help users to share your content and drive viral traffic, In-depth analytics provide insight into your audience and user activity, Powerful APIs let you create your own UI, access analytics, and more. But in default, AddThis button will show on all blogger pages (like home page, static pages, post pages etc.). And also there are only a few option to customize icons. Here, in this post, I am showing you how to add AddThis button with sleek, gray scale icons in only post pages of blogger. So join us after the break!

Note: To see a working demo, visit here and click on any post then scroll to the end of the post.

Getting Started

Log in to your blogger account.
Go to Design > Edit HTML from blogger dashboard. (Template > Edit Template if you are using Blogger in draft’s new dashboard.
Backup Your Template By Clicking On “Download Full Template”

CSS Part

In “Edit HTML” search for the following character.

]]></b:skin>

Now Replace it with the following code

.addthis_toolbox {
padding : 15px 0 5px 0;
text-align : right;
}
.addthis_toolbox .custom_images a {
width : 26px;
height : 26px;
margin : 0 4px 0 4px;
padding : 0;
}
]]></b:skin>

Now save the template.

HTML Part

After finishing CSS part, mark on “Expand Widget Templates” option from the right top menu.

Then search for the following code

<div class='post-footer-line post-footer-line-1'>

Just below it, paste the following code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>    
<div class='addthis_toolbox'>   
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='26' src='http://3.bp.blogspot.com/-lrxF6FnLgFQ/TgjK_KYu1YI/AAAAAAAACJc/OlSNBocpyxs/s1600/twitter.png' width='26'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='26' src='http://2.bp.blogspot.com/-ffqDm0IO-JY/TgjLAnHaKeI/AAAAAAAACJo/tB8Nh6VpJCs/s1600/delicious.png' width='26'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='26' src='http://4.bp.blogspot.com/-SNYIRB6-YS8/TgjLADQQreI/AAAAAAAACJk/EBRuqRxtuRk/s1600/facebook.png' width='26'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='26' src='http://3.bp.blogspot.com/-9Abu9PRBoag/TgjK-1nbgtI/AAAAAAAACJY/_myCThmuvoQ/s1600/digg.png' width='26'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='26' src='http://1.bp.blogspot.com/-KkYKDZkYboI/TgjK-GIVSPI/AAAAAAAACJU/DT_Y0_Q4Tig/s1600/stumbleupon.png' width='26'/></a>
<a class='addthis_button_more'><img alt='More' height='26' src='http://3.bp.blogspot.com/-w1DtTNvzdAk/TgjL_uKSvQI/AAAAAAAACJs/LYGf3y0KeAg/s1600/More.png' width='26'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</b:if>

Now save the template.

You are done! It’s easy, isn’t it?

Customizing Position

Here I am placing the AddThis me at the post ends. You can customize it by placing the HTML part either below <div class='post-header-line-1'/> or <data:post.body/> or anywhere you want to.