skip to main | skip to sidebar

I needed to use the tall Delicious save button, but I found that it wasn't tall at all.. it was short & fat :)
So, I had to shrink it a little by hiding some parts. And, since Delicious was smart enough to implement their button using AJAX. It is easy to customize the button using CSS.

Update 18 Jul 2010:
I've created "Quite Delicious Button" to replace Delicious tagometer, check it out!

Most of the other networks implement their buttons using iFrames which you can't modify anything inside of it.

Will use the same Javascript code of the tall Tagometer:

<script type="text/javascript">
   if (typeof window.Delicious == "undefined") window.Delicious = {};
   Delicious.BLOGBADGE_DEFAULT_CLASS = 'delicious-blogbadge-tall';
   Delicious.BLOGBADGE_GRAPH_SHOW = false;
   Delicious.BLOGBADGE_TAGS_SHOW = false;
</script>
<script src="http://static.delicious.com/js/d2-blogbadge.js"></script>


And insert this CSS before the JavaScript code preferably in the head of the page:
<style type="text/css">
   /* less width! */
   .delicious-blogbadge-tall
   {
      width:62px;
   }
   /* less border and font-size */
   .delicious-blogbadge
   {
      border-width:1px !important;
      font-size:9px !important;
      padding:2px !important;
   }
   .delicious-blogbadge .save-to-link
   {
      padding-left:17px !important;
   }
   /* boldify and center the count */
   .delicious-blogbadge .url-link .post-count
   {
      display:block;
      font-size:20px !important;
      padding:5px 1px;
      text-align:center;
   }
   /* less padding around the count */
   .delicious-blogbadge-tall .url-link
   {
      padding:1px !important;
   }
   /* hiding useless parts */
   .delicious-blogbadge .save-to-link-label span
   ,.delicious-blogbadge .save-to-link-label strong
   ,.delicious-blogbadge .post-count-label-after
   {
      display:none
   }
</style>

Another important hack that you will not find in Delicious tagometer page, is to set the URL manually. that is useful when you are displaying multiple buttons in the same page.
You can find about that old hack at [Adding Del.icio.us to Wordpress Blogs]

2 comments

  1. nintendo dsi r4 // December 7, 2009 at 10:30:00 PM GMT+11  

    Thanks for the great article with the entire java script code.

  2. New Game // December 12, 2009 at 12:40:00 AM GMT+11  

    delicious best social bookmarking and have many large member from around the world, its a usefull site

Post a Comment

Thank you for taking the time to comment..
* If you have a tech issue with one of my plugins, you may email me on mike[at]moretechtips.net
More Tech Tips! | Technology tips on web development

Mike

Mike MoreWeb developer, jQuery plugin author, social media fan and Technology Blogger.
My favorite topics are: jQuery , Javascript , ASP.Net , Twitter , Google..
<connect with="me"> </connect>

Subscribe by email

Enter your email address:

or via RSS