Table of Contents
All have been waiting for an official delicious button with counter, but there’s no response from Delicious guys about launching new button. All we have is the still old button. But don’t worry, bloggers, here comes awesome delicious buttons with counters, both for WordPress and Blogger (blogspot). Deepu Balan – a blogger from deepubalan.com came to rescue of delicious fans with an awesome delicious bookmark button with counter in the form of WordPress plugin. Well its his first WordPress plugin 🙂 This button counts real-time count of how many times your page has been bookmarked in delicious Don’t worry Blogspot bloggers, I’ve also included the tutorial for you guys.
Delicious bookmark button with counter for WordPress
How to add them in post page of wordpress?
- Step 1: Download this plugin from here and upload it to plugins folder of your WordPress blog.
Step 2: Activate the plugin and then open the single.php file of your WordPress theme. (ie: /public_html/wp-content/themes/THEMENAME/Single.php directory of your WordPress installation).
Step 3: Now add the short-code <?php delit_normal(); ?> for normal button or <?php delit_compact(); ?> compact version to suitable location inside Single.php file of your WordPress theme.
You may add it just after the below code if you want the button to appear at the bottom of the post, or add the short-code above the below code if you want the button to appear at the starting of the post.
<?php the_content(__('More >', 'mystique')); ?>
Delicious bookmark button with counter for Blogger (Blogspot)
How to add them in blogspot post?
Step 1: 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://2.bp.blogspot.com/_5rlxf3T9Z9U/TAbBZJth5yI/AAAAAAAAHjo/FjCcx7cEcyE/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://4.bp.blogspot.com/_5rlxf3T9Z9U/TAbLWujRYKI/AAAAAAAAHkI/3H0KFMwuWuo/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://4.bp.blogspot.com/_5rlxf3T9Z9U/TAbLWujRYKI/AAAAAAAAHkI/3H0KFMwuWuo/s1600/del+new.png) no-repeat center -17px;
display: block;
}
Now you have to place the code for button to make it work. Make sure you have checked the “expand widgets” templates and now search for the below line.
<data:post.body/>
Once you find the above line, add the below code just after that line.
