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 == "item"'> <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.
Please Add Google Plus Button To This
ReplyDelete