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.
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]

0 comments

Post a Comment

You can use some HTML tags, such as <b>, <i> but no links!
Thank you for taking the time to comment..But don't waste it on spamming!

Recent Posts

Mike

Mike More After few years as a web developer, I started to like blogging as a way to improve my skills and to share knowledge too. My favorite topics are ASP.Net,ASP, JavaScript, jQuery, XML and SQL Server.

Subscribe by email

Enter your email address:

or via RSS Feed

Now, take a break

<connect></connect>