Delicious Bookmark Buttons With Counter For Blogger

Delicious Bookmark buttons With Counter 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/AVvXsEi7zNvXrF7gEUwovVWYK1U8BukxpdntDsFsnhR45YMD74reDNcP3QusqOpcwl6sxqvdxExDuUPRRWJz05P4DmiuDI57d-e2R0bBCdjGRUaFaVClT_hxi3OrWIMx_zlI-gsFBKc2noeZQBw/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/AVvXsEgKgvMtmWRwoYrNjktxvRqe1mp7MPXKP8bmHklaK2MKw6DDgItfCDUFLpp-DUpgZrey9ZXh5JhBv-nbVo_ntlgUKEtDicC9SEx6X4Fufg-z_nwK83DMOfIhCFno_OJ7-q8TdGR9uPZEkCY/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/AVvXsEgKgvMtmWRwoYrNjktxvRqe1mp7MPXKP8bmHklaK2MKw6DDgItfCDUFLpp-DUpgZrey9ZXh5JhBv-nbVo_ntlgUKEtDicC9SEx6X4Fufg-z_nwK83DMOfIhCFno_OJ7-q8TdGR9uPZEkCY/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 == &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'/>

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/AVvXsEiZxNeKE5v_d2bUVweiRK-eFFkoSvCgwjYxffRF3-5pTpyupABOFJYaj6E43nH8_pE3mf_Sl-mu_6_zdEgmywV5UQRLMl2suLDYNd4k3S4X5s79hZr3VdZKhyphenhyphenniVY1Pr09RhqCXp2GyxUU/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/AVvXsEgKgvMtmWRwoYrNjktxvRqe1mp7MPXKP8bmHklaK2MKw6DDgItfCDUFLpp-DUpgZrey9ZXh5JhBv-nbVo_ntlgUKEtDicC9SEx6X4Fufg-z_nwK83DMOfIhCFno_OJ7-q8TdGR9uPZEkCY/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/AVvXsEgKgvMtmWRwoYrNjktxvRqe1mp7MPXKP8bmHklaK2MKw6DDgItfCDUFLpp-DUpgZrey9ZXh5JhBv-nbVo_ntlgUKEtDicC9SEx6X4Fufg-z_nwK83DMOfIhCFno_OJ7-q8TdGR9uPZEkCY/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 and special thanx to woork for script which i saw him using on his wordpress blog and to cheth who provided me with beautiful delicious counter images to make an complete beautiful delicious bookmark counter for you.