Customize Technorati Top Tags Cloud Widget

The Top Tags Cloud widget by Technorati comes with a title, an image at the bottom and also the tag colors, font, size and so on which cannot be customized by default (see the image above). But if found a way to customize these. This is the code given by Technorati:

<script src="http://widgets.technorati.com/t.js" type="text/javascript"> </script>
       <a href="http://technorati.com/blogs/{URL}?sub=tr_tagcloud_t_ns" class="tr_tagcloud_t_js" style="color:#4261DF">View blog top tags</a>

Put it between <div class="cloud"> </div>, like so:

<div class="cloud"><script src="http://widgets.technorati.com/t.js" type="text/javascript"> </script>
       <a href="http://technorati.com/blogs/{URL}?sub=tr_tagcloud_t_ns" class="tr_tagcloud_t_js" style="color:#4261DF">View blog top tags</a></div>

Then you will be able to modife the CSS Style for "cloud", like so:

-hiding the header:

.cloud h3, .cloud h4, .cloud img { display: none; }

-formatting the header:

.cloud h3 a { color: #804000!important; }

-formatting the second header:

.cloud h4 { color: #804000; }

-Adjust the widget size and border:

.cloud .tr-blog-top-tags {
width: 176px!important;
border: 1px solid #668899;
padding: 2px;
margin: 5px 0 0 0; } 

-Tags text color (links):

.cloud li a { color: #668899!important; } 

-Text size for the tags and spacing:

.cloud .tr-blog-top-tags ul {
list-style-type : none;
background-color: #FFFFFF!important;
margin : 0 auto;
padding : 0;
font-size: .9em;
line-height: 1.2!important;
}
.cloud .tr-blog-top-tags li {
display : inline;
background-image : none !important ;
padding : 0;
margin : 0;
font-size: .9em;
line-height: 1.2!important;
vertical-align : baseline !important ;
border : 0px!important ;
} 

Format the way tags behave on mouse over (hover):

.cloud .tr-blog-top-tags li a:hover {
border-bottom-color: #804000!important;
border-bottom-style: dotted!important;
border-bottom-width: 1px!important;
color: #804000!important; } 

-Background color for the tags:

.cloud ul { background-color: #EEEEDD!important; }

You can of course change the above color codes and other parameters to suit your needs. You can see the customized Technorati Top Tags Cloud Widget in the right side of my blog.

[credits: webperformancematters.com]