Shrinking that Fat Delicious Tagometer Badge!

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]

Tags: CSS , javascript , Social Bookmarking , Tech Tips