Add Delicious Bookmark Buttons With Counter For Blogger

Add Delicious Bookmark Buttons With Counter For Blogger

1.Log in to your dashboard--> desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this <data:post.body/> Tag.

4.Copy below code and paste it just after the line <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-delicious'>
<div class='delicious' id='delic'>0</div>
<div class='delicious-b'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='blank'>delicious</a></div>
<script type='text/javascript'>
function delic(info) { 
if(!info[0]) return;
var num = info[0].total_posts;
if(!num) return; 
var delic = document.getElementById(&#39;delic&#39;);
delic.innerHTML = &#39;&#39; + num;
delic.style.textIndent = 0;
delic.style.paddingRight= &#39;6px&#39;;
}
</script>
<script expr:src='&quot;http://badges.del.icio.us/feeds/json/url/data?url= &quot; + data:post.url + &quot;&amp;callback=delic&quot;'/>
</div>
</b:if>
<div class='clear'/>

5.Now Scroll down to where you see ]]></b:skin> tag .

6.Copy below code and paste it just before the ]]></b:skin> tag.


Style 1:

.share-delicious{
width:50px;
height:63px;
text-align:center;
}

.delicious{
width:50px;
height: 45px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRBGYErGZY4OAGO0Z0ZWQlf1LjZVZyykAZTM3ECkZMHo1UuZVFaDpxy_p3XChMxgupNP1ZimsyJKE-kK3aDBmmK9zxOTQFkdH9DmFd0G2oZVBSGc11mgexBN10fsnpO731XWI-fQRBHFI/s1600/del+above.png) no-repeat;
font-weight: bold;
font-size: 16px;
font-family:arial;
color:#adadad;
margin:0 auto;
line-height:36px; 
}
.delicious-b{
font-size:10px;
text-transform:none;
color:#FFF;
margin:0 auto;
width:50px;
height:17px;
line-height: 17px;
}
.delicious-b a:link, .delicious-b a:visited{
color:#FFF;
font-weight:normal;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQTKl10faX-8E8J8cLljpVXH6lTdA7z09o5kf2SPpsJLFc_W3Tiv8iwr53Z7A3IW78Tc0dsojKxz5t8HBWGb07sxnVh3P6JKM18i82xc4BAS9AacGYa0uArsEY4JwtIJYNzA-Xz6PqF3E/s1600/del+new.png) no-repeat;
display: block;
text-decoration:none;
}
.delicious-b a:hover{
color:#11788b;
font-weight:normal;
text-decoration:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQTKl10faX-8E8J8cLljpVXH6lTdA7z09o5kf2SPpsJLFc_W3Tiv8iwr53Z7A3IW78Tc0dsojKxz5t8HBWGb07sxnVh3P6JKM18i82xc4BAS9AacGYa0uArsEY4JwtIJYNzA-Xz6PqF3E/s1600/del+new.png) no-repeat center -17px;
display: block;
}

Style 2:

.share-delicious{
width:100px;
height:19px;
text-align:center;
font-family:arial;
}
.delicious{
width:46px;
height: 19px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRvIdDj9bBzH1ksgLSXzZckgEg0g8jaMaSRHc9qOBpl0Tm3jOko2PAqEFUO-ucoWOX2W-C5On6ZR8VtUOJ1iZEX1PU3p0D9nPus2OwJlPbDGS_LJ1GMQtO1PWIfRKqrx1pPcqn2DfdSs4/s1600/comp+del.png) no-repeat;
font-weight: bold;
font-size: 13px;
color:#999;
margin:0 auto;
line-height:18px; 
float:left;
}
.delicious-b{
font-size:10px;
text-transform:none;
color:#FFF;
margin:0 auto;
width:50px;
height:17px;
line-height: 17px;
float:left;
}
.delicious-b a:link, .delicious-b a:visited{
color:#FFF;
font-weight:normal;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQTKl10faX-8E8J8cLljpVXH6lTdA7z09o5kf2SPpsJLFc_W3Tiv8iwr53Z7A3IW78Tc0dsojKxz5t8HBWGb07sxnVh3P6JKM18i82xc4BAS9AacGYa0uArsEY4JwtIJYNzA-Xz6PqF3E/s1600/del+new.png) no-repeat;
display: block;
text-decoration:none;
}
.delicious-b a:hover{
color:#11788b;
font-weight:normal;
text-decoration:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQTKl10faX-8E8J8cLljpVXH6lTdA7z09o5kf2SPpsJLFc_W3Tiv8iwr53Z7A3IW78Tc0dsojKxz5t8HBWGb07sxnVh3P6JKM18i82xc4BAS9AacGYa0uArsEY4JwtIJYNzA-Xz6PqF3E/s1600/del+new.png) no-repeat center -17px;
display: block;
}

7.Now click on "Save template" you are done.

Cheers.