How to add social bookmarking at the bottom of blogger post

First thing first. Log-in to your blogger account, go to your dashboard then to lay-out and edit html. Before we go any further, download your full template first forback up purposes, just in case something goes wrong we can easily go back and try again.

• Two new easy ways to add social bookmarking at the bottom of blogger post. 

Now, are you ready?Check the “Expand Widget Templates” and look for “<data:post.body/>“. In my case I’ve got two “<data:post.body/>“ in my template, one for my post summary script and the other is for the post body. So, if we have the same situation go to the second “<data:post.body/>“. Under or just after it, paste the codes given inside the box below.

Other options on where to put the bookmarking codes, below or after these lines:

<div class=’post-footer-line post-footer-line-1′> (many prefer this)

<div class=’post-footer-line post-footer-line-2′> (I did not try this)

<div class=’post-footer-line post-footer-line-3′> (This is where I put my bookmarking codes)

Note: Replace the (#) in this code with your image URL.
<!– Start of social bookmarks –><br /><span><br/></p><br /> <p>Share this post to: </p><br /> <p><a expr:href='”http://digg.com/submit?phase=2&url=” + data:post.url + “&title=” + data:post.title’ target=’_blank’ title=’digg this post’><img alt=”digg” border=”0″ src=”https://www.techchore.com/#” /></a><br /><a expr:href='”http://technorati.com/faves?add=” + data:post.url’ target=’_blank’ title=’share this on technorati’><img alt=”technorati” border=”0″ src=”https://www.techchore.com/#” /></a></p><br /> <p><a expr:href='”http://del.icio.us/post?url=” + data:post.url + “&title=” + data:post.title’ target=’_blank’ title=’bookmark this post on delicious’><img alt=”Photobucket” border=”0″ src=”https://www.techchore.com/#” /></a></p><br /> <p><a expr:href='”http://www.stumbleupon.com/submit?url=” + data:post.url + “&title=” + data:post.title’ target=’_blank’ title=’stumble this post’><img alt=”stumbleupon” border=”0″ src=”https://www.techchore.com/#” /></a></p><br /> <p><a expr:href='”http://reddit.com/submit?url=” + data:post.url + “&title=” + data:post.title’ target=’_blank’ title=’reddit this post’><img alt=”reddit” border=”0″ src=”https://www.techchore.com/#” /></a></p><br /> <p><a expr:href='”http://myweb2.search.yahoo.com/myresults/bookmarklet?t=” + data:post.title + “&u=” + data:post.url’ target=’_blank’ title=’share this post on yahoo’><img alt=”Yahoo” border=”0″ src=”https://www.techchore.com/#” /></a></p><br /> <p><a expr:href='”http://www.mixx.com/submit?page_url=” + data:post.url’ target=’_blank’ title=’mixx this post’><img alt=”mixx” border=”0″ src=”https://www.techchore.com/#” /></a></p><br /> <p><a expr:href='”http://www.facebook.com/share.php?u=” + data:post.url’ target=’_blank’ title=’share this post on facebook’><img alt=”facebook” border=”0″ src=”https://www.techchore.com/#” /></a></p><br /> <p><br/></span></p><br /> <p><!– End of social bookmarks –><br />
Are we finished? Not yet!
Download your icons here:

After you downloaded the file extract it using winrar or zip. Please take note, this file has more icons than we actually need, just select the applicable icons for this tutorial such as facebook, mixx, yahoo, reddit, stumbleupon, delicious, technorati and digg. It has two sizes, choose those fits your blog. For me I prefer the 32 x 32. Now upload it to your photobucket account or tinypic, wherever. Then get the html code of your icons, it will look like this <http://i671.photobucket.com/albums/vv77/sample/mixx.png> on Photobucket and this <http://i28.tinypic.com/f9l8g3.jpg> on Tinypic . Replace the sharp (#) symbol in the given codes with your icon’s html code or url accordingly.

• Two new easy ways to add social bookmarking at the bottom of blogger post. 

There you have it; it’s time to save your template. If you follow the instructions right, the result would be the mirror of my own social bookmarking buttons as what you can see at the bottom of my post.