Monday, December 5, 2011

How to Add Social Bookmark Buttons to Your Blog Posts

Sponsored Ads
You might have notice that I have quite a lot of social bookmarking buttons on my blog posts page. You will see that I got Digg button, Tweet It button, Delicious, Share on Facebook and more buttons on my blog posts. I am going to share with you how you can add Digg button, tweet it button and delicious button my your blog posts.

The implementation is easy and it is an important feature to have on your blog as well because the power of social bookmarking is powerful and it can bring in a lot of visitors and backlinks to your blog. I have included all the codes and designs in the following step-by-step guide to help you implement this function to your blog easily. So, go ahead and learn more.



Get Backlinks from Bookmarks


Social bookmarking is a great way to create backlinks to your blog. If you can make use of these social bookmarking buttons on your blog, you can gain large amount of backlinks to your blog and gain more traffic to your blog in long term. I have written a post about Top High Page Rank Social Bookmarking Sites, you can learn some of the top social bookmarking sites at my post.

Add Social Bookmarking Buttons to your Blog Posts

Notice: This tutorial requires you to edit your template, so please follow carefully. In case you have problem saving your template due to errors, restart all the steps here.

First of all
You will have to login to your Blogger.com account and then go to Design, click on "Edit HTML" and "Expand Widget Template".

Next, Copy and Paste the CSS code below before the " ]]</b:skin> " code of your template.

.horizontal li
{
display:inline;
list-style-type: none;
text-align: left;
padding-right: 10px;
}

After you paste your code, it look like the picture below:

add bookmark buttons to blogger

Now, grab the code below:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div>
<ul class='horizontal'>
<li>
<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='ICON OF BUTTON HERE'/> Del.icio.us</a></li>
<li>
<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='ICON OF BUTTON HERE'/> Stumble It</a></li>
<li>
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Digg' src='ICON OF BUTTON HERE'/> Digg this</a></li>
<li><a expr:href='&quot;http://twitter.com/home?status=Check this Out: &quot; + data:post.url + &quot; | &quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Twitter' src='ICON OF BUTTON HERE'/> Tweet it</a></li>
</ul>
</div>
</b:if>


Then, paste the code after the code below:


<div class='post-header-line-1'/>
</div>
PASTE CODE HERE

Your code will look like the picture below after your have pasted it.

add bookmark buttons to blogger


Finally, "Save Template" and you bookmark button is done.

Note:
Please be reminded that this codes is using a conditional tag. The conditional tag will make the button appear only when your blog posts is viewed. Those bookmarks buttons will not appear on your blog homepage.

Conditional Tags of this Code1. Bookmark buttons appear only when visitors visit your blog posts
2. Bookmark buttons appear only when visitors click on "Read more" to read your blog posts. 

So, that is it. You have created bookmark buttons on your blog posts.

If you like my blog, please subscribe for more tips. Subscription is free and you will get a free e-book as well. Please help me bookmark my blog posts if you like it too. Thanks. :)

About the Author: This Post is written by William Lee (Nickname: Greenleaf). Make money blogging and work from home is the best job I ever experienced.