Monday, January 4, 2010

How to add the delicious button with a hit counter in your Blogger postings


This is a Blogger hack used to add the delicious button with a hit counter of the number of users that shared the current link for each posts. This is similar to the retweet button with the same function, just a different look.

Directions

Step 1 - In your Blogger account, navigate to Layout > Edit HTML (select "Expand Widget Template") and locate the following section code:

To have it under post titles or above postings
Locate <div class='post-header-line-1'/> or something similar to that

To have it under postings where the post footer is
Locate <div class='post-footer-line post-footer-line-1'/> or something similar to that

Step 2 - Add the following section code below to your desired location. This is where the link will appear.

<a expr:href='"http://del.icio.us/post?url="+ data:post.url +"&amp;title" + data:post.title' target='_blank'>add to del.icio.us</a>
saved by <span class='delsquare' expr:id='"a"+data:post.id'>0</span>users

<script type='text/javascript'>
function displayURL(data) {
var urlinfo = data[0];
if (!urlinfo.total_posts) return;
document.getElementById('a<data:post.id/>').innerHTML =urlinfo.total_posts;
}
</script>
<script expr:src = '"http://badges.del.icio.us/feeds/json/url/data?url= " + data:post.url + "&amp;callback=displayURL"'/>

 Add style to it
Copy and paste the following section code right after the head code:  <head>

<style>
.delsquare{
font-family:Arial;
background:#0033CC;
padding:2px 4px;
font-weight:bold;
font-size:12px;
color:#FFFFFF;
}
</style>

 *Tutorial Complete


Source: delicious, woork up

1 comment: