Customize Labels Cloud in Blogger

Back in the year 2008 when Blogger.com was moving through several update phases, third party developers would often take the golden opportunity of creating widgets for BlogSpot blogs but as soon as Google rolled out massive changes to their online services, several official widgets popped out which load fast and perform well because the scripts are served by Blogger servers. Page List and label cloud/list enabled designers to create dynamic menus. Since the stylesheet was made accessible. therefore we all got a chance to play with these widgets and transform them completely in look and appearance. I must ensure you that the styles are perfectly compatible in all major browsers including IE8+.

DEMO: Look at the label CATEGORIES on the sidebar of this blog

This is how labels look in cloud display:

This is how it will look after you apply the new style.

  

The code below can be customized in several ways to create exciting label designs. You can also add background images to them.

Follow these easy steps:

1. Go to Blogger > Settings> Layouts
2. Click add a gadget and choose Labels
3. Inside the settings make sure to choose the cloud display. You may set other options as per your requirement. See the screenshot below as example

Please choose to display at most 25 labels. Too much labels on homepage look awkward. Showcase your best categories only.

       4.    Now save the widget and go to settings > Template
       5.     Backup your template
       6.     Click Edit html > Proceed  and search for this

]]></b:skin>

7.   Just above it paste the following CSS code:

/*-----Custom Labels Cloud widget by http://blogg-tricks.blogspot.in/----*/ .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; }
8.  Save your template

9.    All done!

Visit your blogs and see the labels completely transformed to small neatly crafted rectangular boxes. 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.