How to add Social Bookmarking Icons below your posts?

A very fascinating thing which a new blogger notice is the social bookmarking icons at the end of each posts. Perhaps it is the best way to increase traffic to your site.
Here is a simple method to add these icons below every post.

1. Go to Layout>Edit HTML and take a backup of your old template by downloading it. Also take the backup of all your widgets(gadgets installed,available under Page Elements) in a text file.

2. Find this
<data:post.body/>



3. Add this immediately after above code.

<!--SOCIAL-BOOKMARKING-ICONS-STARTS-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/><h3>Spread the word...</h3><br/>
<!--DIGG-->
<script type='text/javascript'>digg_url=&quot;<data:post.url/>&quot;;</script><script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
<img alt='Digg It' src='http://i28.tinypic.com/dnlsvt.jpg'/>
<!--Stumble-->
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='http://i30.tinypic.com/rj3yj8.jpg'/></a&gt;
<!--Delicious-->
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='http://i27.tinypic.com/r29dau.jpg'/></a>
<!--Technorati-->
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='http://i26.tinypic.com/1qop34.jpg'/></a>
<!--Twitter-->
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://i25.tinypic.com/e7glsn.jpg'/></a>
<!--Facebook-->
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='http://i26.tinypic.com/14jp07k.jpg'/></a></b:if>
<!--SOCIAL-BOOKMARKING-ICONS-STOPS-->


It will appear like this..



4. To change the icons, just upload the pictures of social bookmarking icons you like to a server which provides a direct link. Recommended: tinypic

5. Replace the URL of uploaded pictures by red colored lines in the above code.

P.S To see a large collection of Social bookmarking icons and other icons, Click here

Still confused.. Watch out!

1 comments:

Piyush said...

thanks gr8 work!!!!

Post a Comment