Add A Beautiful Delicious Counter Button

Delicious counter buttons are quite essential for every blogger, but there are many counter buttons out in the field which actually doesn’t work. It was my experience, when I was in search of delicious counter buttons. Finally I found a way to make our delicious button. The tutorial which I am going to teach you was made by Mike. So, this is going to be a little detailed version of what he has written on his blog.

Live Demo

WordPress

Step 1: Go to header.php on your WordPress dashboard and insert the below code within</head>.

1	<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

2	<script type="text/javascript" src="http://delicious-button.googlecode.com/files/jquery.delicious-button-1.0.min.js"></script>

Step: 2 Now go to single.php and paste this code after <?php the_content(); ?>

01	<div style='float:right; margin-right:10px;'>

02	<a class="delicious-button" href="http://delicious.com/save">

03

<!-- {

04	url:"<?php the_permalink() ?>"

05	,title:"<?php the_title(); ?>"

06	,button:"wide"

07

} -->

08	Save on Delicious

09

</a>

10

</div>

For horizontal button, remove ,button:”wide” from the step 2.

Blogger

Well, I don’t want to miss Blogger platform and here we go to the installation.

Step 1: Go to Edit HTML in your Blogger dashboard and paste the below code within</head>.

1	<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

2	<script type="text/javascript" src="http://delicious-button.googlecode.com/files/jquery.delicious-button-1.0.min.js"></script>

Step 2: Search for <div class=’post-header-line-1′/> if you are not able to find search for <data:post.body/> and paste this code below to that

01	<div style='float:right; margin-right:10px;'>

02	<a class='delicious-button'  href='http://delicious.com/save'>

03

<!-- {

04	url:"<data:post.url/>"

05	,title:"<data:post.title/>"

06	,button:"wide"

07

} -->

08	Save on Delicious

09

</a>

10

</div>

For horizontal button remove ,button:”wide” from the step 2.

Hope this tut is helpful to add a beautiful delicious counter button. Finally thanks to Mike for making this awesome piece of work.