SimpleBloggerTips: Simple way to customize Labels Cloud in Blogger

Label cloud enabled designers to create dynamic menus. Since the stylesheet was made accessible.I am going to post a simple way to customize Labels Cloud.You can create your tag clouds without any external script or template modifications.Follow these steps

•  Log on to Blogger > Settings> Layouts
•  Click add a gadget and choose Labels
•  Now inside setting you have to choose the cloud display see the screenshot below as example:-

Only choose to display maximum 25 labels.

•  Now you can save the widget and go to settings and Template
•  Before editing backup your template
• Click Edit html then Proceed  and search for this

]]></b:skin>

• Just above it paste the following CSS code:

/*-----Custom Labels Cloud widget by www.simplebloggertips.blogspot..com----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out; 
-o-transition: all 0.5s ease-out; 
-webkit-transition: all 0.5s ease-out; 
-ms-transition: all 0.5s ease-out; 
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg); 
-o-transform: rotate(7deg); 
-webkit-transform: rotate(7deg); 
-ms-transform: rotate(7deg); 
transform: rotate(7deg); 
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1; 
}

.label-size a  {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover  {
text-decoration: none;
}

• Now save your templates
• and you are done!!!!         

If in case you want the label boxes to be of random sizes depending on the post-count then simply delete font-size:10px; from the above code.And see the change

Don't Forget to drop your comment below!!!!