Customize Blogger Labels into Clouds

As we know that Blogger.com is the product of Google. But Blogger.com rolled out massive changes in their online services. So now its very easy to create a blog in blogger. First in blogger the Labels is in form of page list labels and cloud/list. So now its enable to create a labels with a dynamic menus. So we got a chance to play with all these widgets and transforms them with a into a new look appearance. So i shared a tutorial that how to give a look to labels in blogger from page list labels into a small blocks that rotate on mouse over. So i hope that you like this style of labels are compatible in all browsers.

Look at the below demo that labels looks like this.

This is look like that when you apply new style on it.

How to apply this new style ?

• First goto blogger.com and login it with your username and and password.
• Then goto layout and click "Add a Gadget" scroll down you will see labels click on it.
• Inside labels click on the cloud as shown in the below screenshot.

• Now click on save button and then goto your template sitting.
• Click on Edit HTML and search the below code.

]]></b:skin>

Just above paste the following the CSS Code.

/*-----A code by truebloggingtricks.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; }

• Save your template and you finally done it.
• Now visit to your blog see your labels into small rectangular blocks.