Add "Save To Delicious Button" To Blogger Blog

delicious bookmarks











This is a simple method to add a Save To Delicious social bookmarking icon for your Blogger Blog. Whenever anyone saves your blog post on Delicious, the counter will update and it will show how many times the blog post was saved on Delicious. Check the picture below to see how it will appear on your blog.

Save To Delicious Example


Login to your blogspot account and visit the Edit HTML option and select the Expand Widget Templates option. Now find the following code in the template (Press Ctrl+F to search)

<p><data:post.body/></p>

and paste the given code above it.

<!-- Delicious -->
<div class='save-delicious'>
<a expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title&quot; + data:post.title' target='_blank'>Save to delicious</a> Saved by
<b id='&quot;a&quot;+data:post.id' style='color:#000000; font:Georgia'><span expr:id='&quot;a&quot;+data:post.id'>0</span></b> users
<script type='text/javascript'>
function displayURL(data) {
var urlinfo = data[0];
if (!urlinfo.total_posts) return;
document.getElementById(&#39;a<data:post.id/>&#39;).innerHTML = urlinfo.total_posts;
}
</script>
<script expr:src='&quot;http://badges.del.icio.us/feeds/json/url/data?url= &quot; + data:post.url + &quot;&amp;callback=displayURL&quot;'/>

</div>
<br/>
<br/>

Now search ]]></b:skin> in the template and paste the given CSS code above it

.save-delicious{
background:url(http://i30.tinypic.com/kcjjt0.png) left top no-repeat;
padding-left:26px;
font-size:11px;
line-height:18px;
float:left;
}

Now click on the Save Template option and check your blog. The Save to Delicious bookmarking button will be present on your blog.

0 comments: