Customize Your Cloud Labels with an Hover Effect In Blogger

If you come back to the years between 2008-2010 in which the Blogger was updating time to time and this was the best time to create or customize widgets and plugins and at that time Google updated the Blogger blogs speed and the widgets became as fast as light and then they updated the labels to clouds and then cloud labels widget was customized. Today I will tell you how to add that customized cloud labels. I recommend you to add it because it is with an hover effect which attract people to your blog/site. Make your blog beautiful , colorful, attractive.

First See It's Demo

Labels Before customization :-

Labels After customization :-

How Will It Work ??

Each Label name will be in a rectangular box .In default labels there are different sizes of fonts  in labels. But in the customized they are all equal and looks great .

Let's Add It

1. Go to Blogger >> Layout >> Add a Gadget >> Labels

Change The Settings As Shown On The Picture

And Save It ! ! ! 

Now, Go To

1. Go to Blogger >> Template >> Edit HTML
2. Click On Code To Activate It
3. Find the code given below (tip: Press CTRL+F to find)
4. ]]></b:skin>
5. Now Add the Below code just above it

/*-----Custom Labels Cloud widget by www.CloudsPedia.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 are Done ! ! ! ! !.