How To Add Delicious Bookmark and Counter Buttons To Blogger Posts

Ritesh Warke On Friday, April 1, 2011

Delicious Bookmark and Counter Buttons For Blogger,you are listening right.Since all the social sites have made the bookmark buttons with counter but delicious has not made till yet.But now we have made it available to our blogger users.And the buttons look very nice too.As we have tried to make the button style to look more beautiful.We have made both the versions of buttons like retweet button.Simple
version and compact version.You can use any you like.The button is using both script and css.You not need to know script but if you know css you can style it in any style you want,to adjust to your blog and can use any image for it and any color.Its more flexible to use and works same like retweet counter.

If you dont know about retweet button you can get it here,how add retweet counter button.

*A normal counter button like retweet button

*A Compact version which fits in less space

Installation
Just Login to Blogger Go to (Dashboard → Layout → Edit HTML → Press Ctrl+F)
Now find for ]]></b:skin> and place the below css before it and hit save template.

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

.delicious{
width:50px;
height: 45px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimCWt53dNayIGOZDn6ZRR8-2syjtLcKE-OolInqVeePHECDgFnMr0dk90GsYjRqQifKYtmAztXGrGT_byh7bazopc1D2BeercxE1I0umXGFfM_riNvgrAWpPptVmSu1RP0psAgdg4wXAg/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/AVvXsEikN-BdJJbvfGhvG9Ss3WiezsVqIAm7k78IejlrHCYegSyaW8kqo4nuzN4-5XM4Yrg2vskUv9AaVBalrgvdiks4P3OgA-FkRtky1ili52qSlFiGCvk6uYXZweKwB_KHaUxBanUjaepTrQY/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/AVvXsEikN-BdJJbvfGhvG9Ss3WiezsVqIAm7k78IejlrHCYegSyaW8kqo4nuzN4-5XM4Yrg2vskUv9AaVBalrgvdiks4P3OgA-FkRtky1ili52qSlFiGCvk6uYXZweKwB_KHaUxBanUjaepTrQY/s1600/del+new.png) no-repeat center -17px;
display: block;
}

Now you have to place the code for button to make it work.Just expand widgets templates by check marking it.Now again search for below line.

<data:post.body/>

After Getting this,place the below codes after it to have button after post and before it to have button at begining of post.

<b:if cond='data:blog.pageType == "item"'>
<div class='share-delicious'>
<div class='delicious' id='delic'>0</div>
<div class='delicious-b'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + 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('delic');
delic.innerHTML = '' + num;
delic.style.textIndent = 0;
delic.style.paddingRight= '6px';
}
</script>
<script expr:src='"http://badges.del.icio.us/feeds/json/url/data?url= " + data:post.url + "&callback=delic"'/>
</div>

</b:if>
<div class='clear'/>

Now just note some colored lines in above codes to use or not.Please use the red lines in above codes if you want to see the delicious button only on post pages else remove them.And use the bold green line at end only if your button is making trouble with other content and floating with it.Like if you add this button at top of post,the post description starts immediately after the button which looks bad.So to make start post description in seperate line you can use the dark green line.Below image will make clear to you what i am saying.

If you will use green line the above image error will not happen.

Compact Button css
Just use below css instead of above one to make it in compact style.

.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/AVvXsEjEESXaB_NUT_a_FvSdvuEKGmK1QADEnmxWR6hKofY66_e3LC1cxMAlm8xbV2dFpllniuS8ocwnGTd8rr9dlSqlVWzArYsjyqdesGZfGv89pMFU3GPLp6ZMJxmIFoCaZbOtGEDuO94DyaY/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/AVvXsEikN-BdJJbvfGhvG9Ss3WiezsVqIAm7k78IejlrHCYegSyaW8kqo4nuzN4-5XM4Yrg2vskUv9AaVBalrgvdiks4P3OgA-FkRtky1ili52qSlFiGCvk6uYXZweKwB_KHaUxBanUjaepTrQY/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/AVvXsEikN-BdJJbvfGhvG9Ss3WiezsVqIAm7k78IejlrHCYegSyaW8kqo4nuzN4-5XM4Yrg2vskUv9AaVBalrgvdiks4P3OgA-FkRtky1ili52qSlFiGCvk6uYXZweKwB_KHaUxBanUjaepTrQY/s1600/del+new.png) no-repeat center -17px;
display: block;
}

I hope Now you will be able to use the delicious buttons to your blogger blog very easily.

This Post is written by: Ritesh R. Warke GPRS Expert & Webmaster. Ritesh R. Warke is a professional Ethical hacker, web designer and front end web developer.