How to add 'social bookmark icons' below each post 12 Comments

It is very important to maintain the look and feel of you post in the blog. By adding social bookmarking icons below each post, they are very useful for bookmarking your post and to maintain colors of your post. You also change these icons at any instant and can add new icons say brand new ones. Different types of icons are available but here is a set that you will definitely like them because of their simplicity.

Social Bookmark Icons :

It is very easy to add this widget to your blog, search for  ]]></b:skin>  and add below code before this tag.

.social {
background-color:#F9F9F9;
border:1px solid #DDDDDD;
font-family:Trebuchet MS;
font-size:12px;
margin:5px;
padding:10px 5px 5px;
text-align:center;
}

You can modify this code and can change colors based on your blog template.

Now, search for  <data:post.body/>  and add the below code after this tag.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='social'>
<strong>If you like this post then consider sharing it with others.</strong><br/>

<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' target='_blank'><img alt='Digg' src='http://i32.tinypic.com/231aps.jpg' title='Digg this article!'/></a>

<a expr:href='&quot;http://del.icio.us/post?url=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' target='_blank'><img alt='del.icio.us' src='http://i30.tinypic.com/wtd3jn.jpg' title='Save on Del.icio.us'/></a>

<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' target='_blank'><img alt='Stumbleupon' src='http://i27.tinypic.com/amr6hf.jpg' title='Stumble this !'/></a>

<a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' target='_blank'><img alt='Facebook' src='http://i29.tinypic.com/4ruomx.jpg' title='Share on facebook'/></a>

<a expr:href='&quot;http://reddit.com/submit?url=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' target='_blank'><img alt='Reddit' src='http://i29.tinypic.com/e83c44.jpg' title='Reddit this !'/></a>

<a expr:href='&quot;http://technorati.com/faves?add=&quot;   data:post.url' target='_blank'><img alt='Technorati' src='http://i27.tinypic.com/2w3crkm.jpg' title='Add to technorati'/></a>

<a expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' target='_blank'><img alt='My Space' src='http://i25.tinypic.com/5umow1.jpg' title='Share on Myspace'/></a>

<a expr:href='&quot;http://twitthis.com/twit?url=&quot;   data:post.url   &quot;&amp;title=&quot;   data:post.title' target='_blank'><img alt='Twitter' src='http://i26.tinypic.com/2d2ek9s.jpg' title='Tweet this !'/></a>

<a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot;   data:post.title   &quot;&amp;u=&quot;   data:post.url' target='_blank'><img alt='Yahoo' src='http://i32.tinypic.com/o5yirp.jpg' title='Bookmark on yahoo!'/></a>

<a expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot;   data:post.url    &quot;&amp;title=&quot; data:post.title' target='_blank'><img alt='Google' src='http://i31.tinypic.com/2j4t5vn.jpg' title='Bookmark on Google'/></a>

<a href='http://feeds2.feedburner.com/micmech' target='_blank'><img alt='Feed' src='http://i25.tinypic.com/2ylrxvc.jpg' title='Subscribe to RSS'/></a>
</div>
</b:if>

Its all over and preview your template, if every thing works fine save it. If there is any problem please do add comment.

Hosting Icons

All these images are hosted by BloggerFlick, please upload them to your own.