How to Add Delicious Button For Blogger

Delicious is a social bookmarking web service for storing, sharing, and discovering web bookmarks. The delicious button can act more like a Retweet Button. Adding a delicious button will show a neat count of how many times, your post has been bookmarked about and will also allow your readers to bookmark it.  To add this widget to your blog, follow these instructions:

Step 1:
Log in to Blogger, go to Design /Layout> Edit HTML and tick the "Expand Widget Templates" checkbox.



Step 2:
Now find (CTRL+F) this in the code:

]]></b:skin>

Step 3:
Then place this CSS code before/above it.

.share-delicious{
width:50px;
height:63px;
text-align:center;
}
.delicious{
width:50px;
height: 45px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDb50VXYjTfr9Fxs4icBbNYZ2opiHjujfWjYhzNRpPagYEd-vlKCIqBjQA4mWJivi7jdUzTGft-YcrhyphenhyphenqbwOIUCHBBpv31o6ooS9NCYBecomN38KymxQBn2iaAVZaupcHQZB7UFFroSbw/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/AVvXsEjv_yjIOPkZBCftzEFSiK_iNhkoElMDYZ1d_VPmRJcMiqr805kT0n3eCLqMcIVzcDLjKOj5IQHRoyoGy2dHzIpydY9g5dgZOxdTtwmwU2wGhXcO6jKO8mfyflC601-HAl3yYs73IC5IhdY/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/AVvXsEjv_yjIOPkZBCftzEFSiK_iNhkoElMDYZ1d_VPmRJcMiqr805kT0n3eCLqMcIVzcDLjKOj5IQHRoyoGy2dHzIpydY9g5dgZOxdTtwmwU2wGhXcO6jKO8mfyflC601-HAl3yYs73IC5IhdY/s1600/del+new.png) no-repeat center -17px;
display: block;
}

Step 3:
Now find (CTRL+F) this in the code:

<data:post.body/>

Case 1:
To place the delicious button at the top right corner of your post paste this code before/above it :

<div style="float:right;padding:4px;">
<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>
</div>

NOTE: Don't forget to save the template.
NOTE: To change the button position from "Top-Right" to "Top-Left" just change the float position to left. i.e. float:right changes to float:left check it in Case 2 below.


Case 2:


NOTE: Followed by Step 2 and Step 3.
To place the delicious button at the top left corner of your post paste this code before/above it :

<div style="float:left;padding:4px;">
<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>
</div>

NOTE: Don't forget to save the template.

Now if you want the compant button:

Case 3:


To get a compact delicious button just change the CSS code with this. :

.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/AVvXsEi4IUnjsq1Q-sbYkHmVyLB-h6LIoWFYbcAsnBkyIU5Bu5TmDdPqIBKJxDrBCmAImJXXSAgwKGzlNlSPF9ixM4BExlBsOlcxBbI9y2cMEVJaTdo7gT76jXOXUvBolTnnasiFB2YwoDEZiXc/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/AVvXsEjv_yjIOPkZBCftzEFSiK_iNhkoElMDYZ1d_VPmRJcMiqr805kT0n3eCLqMcIVzcDLjKOj5IQHRoyoGy2dHzIpydY9g5dgZOxdTtwmwU2wGhXcO6jKO8mfyflC601-HAl3yYs73IC5IhdY/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/AVvXsEjv_yjIOPkZBCftzEFSiK_iNhkoElMDYZ1d_VPmRJcMiqr805kT0n3eCLqMcIVzcDLjKOj5IQHRoyoGy2dHzIpydY9g5dgZOxdTtwmwU2wGhXcO6jKO8mfyflC601-HAl3yYs73IC5IhdY/s1600/del+new.png) no-repeat center -17px;
display: block;
}

NOTE: Don't forget to save the template.
NOTE: To place the compact delicious button at the top left corner of your post just change the code as shown in Case 1 and Case 2.
This will put a delicious button to every post. But it won't let you choose which post you want to include or exclude a button.

Check For More Social Share Buttons "How to add Linkedin Share, Yahoo Buzz, Reddit, Facebook Like, Google Buzz, Stumbleupon, Digg, Tweet, Retweet and Facebook Share buttons in blogger."