Add Social Bookmark Icons In Blogger

Do you want to add social bookmark icons in blogger after every post? Well in this article, i will teach you how to add social bookmark icon in blogger. But always remember whenever you do something to your HTML code, PLEASE backup your template first.

I will teach you how to add popular social bookmarking sites like Digg, Technorati, del.icio.us, Reddit, Blinklist, Furl, Yahoo, Simpy, etc.

Readers can click them to add your site or your post to their bookmarks and in sharing these links with others, your Blog becomes more visible. This code when inserted into your template will automatically place these social bookmark links at the bottom of every post. There are many social bookmarking sites and new sites pop up almost every week. What we can do here is to provide you with a code that will place several of these popular sites, and update this list over time.

Ok, lets go.

Step 1. Sign in to blogger, Layout -> Edit HTML and Expand widget templates.

Step 2. Copy the code below

<!-- Start of social bookmarks. Check http://tips-for-new-bloggers.blogspot.com/ for updates --><br/><br /><a href="'" phase="2&url=" title="" target="'_blank'"><img alt="'Digg'" src="'http://i191.photobucket.com/albums/z76/tipsfornewbloggers/digg.gif'/" /></a><br /><a href="'" add="" target="'_blank'"><img alt="'Technorati'" src="'http://i191.photobucket.com/albums/z76/tipsfornewbloggers/technorati.gif'/" /></a><br /><a href="'" url=" + data:post.url + " title="" target="'_blank'"><img alt="'del.icio.us'" src="'http://i191.photobucket.com/albums/z76/tipsfornewbloggers/delicious.gif'/" /></a><br /><a href="'" url=" + data:post.url + " title="" target="'_blank'"><img alt="'Stumbleupon'" src="'http://i191.photobucket.com/albums/z76/tipsfornewbloggers/stumbleupon.gif'/" /></a><br /><a href="'" url=" + data:post.url + " title="" target="'_blank'"><img alt="'Reddit'" src="'http://i191.photobucket.com/albums/z76/tipsfornewbloggers/reddit.gif'/" /></a><br /><a href="'" action="Blink/addblink.php&Url=" title="" target="'_blank'"><img alt="'Blinklist'" src="'http://i191.photobucket.com/albums/z76/tipsfornewbloggers/blink.gif'/" /></a><br /><a href="'" t=" + data:post.title + " u="" target="'_blank'"><img alt="'Furl'" src="'http://i191.photobucket.com/albums/z76/tipsfornewbloggers/furl.gif'/" /></a><br /><a href="'" url=" + data:post.url + " title="" target="'_blank'"><img alt="'Spurl'" src="'http://i191.photobucket.com/albums/z76/tipsfornewbloggers/spurl.gif'/" /></a><br /><a href="'" t=" + data:post.title + " u="" target="'_blank'"><img alt="'Yahoo'" src="'http://i191.photobucket.com/albums/z76/tipsfornewbloggers/yahoo.gif'/" /></a><br /><a href="'" href=" + data:post.url + " title="" target="'_blank'"><img alt="'Simpy'" src="'http://i191.photobucket.com/albums/z76/tipsfornewbloggers/simpy.gif'/" /></a><br/><br /><!-- End of social bookmarks -->

Step 3. Where to place them

- Below your Posts and before the “Posted By” line.

Scroll to these lines and place the relevant code at the red portion.

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
PLACE CODE HERE
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>

- Just above the labels

Scroll to these lines and place the relevant code at the red portion.

PLACE CODE HERE
<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>

- Bottom after the labels

Scroll to these lines and place the relevant code at the red portion.

<p class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</p>
PLACE CODE HERE

Credit goes to http://tips-for-new-bloggers.blogspot.com

Related articles :

How to Create a “What’s Next?” After Every Post In Blogger

Top 10 Blogger Hacks and Tips

Creating Expandable Post

Add Digg button

Change Blogger Favicon

Add Language Translation

10 Questions Every Blogger

Hide Navigation Bar

Convince People To Comment

Put Clock In Your Blog

Change Post Date To Calender...