Customize Label Cloud Widget with CSS Hover Effect for Blogger

Customized Lable Cloud Widget
Live Demo

How To Customize Label Cloud with CSS?

Follow Simple Steps:

• Go To Blogger.com >> Your Site >> Add a Gadget >> Label.
• Now match the settings which are shown in the screenshot below.

• Select the Cloud from the Display settings.
• Uncheck the Show number of post per label.

Now go ahead and Save the widget and that’s it we have successfully integrated a Label Cloud widget.

Customize and Stylizing Blogger Label Cloud Widget:

• Once again go to Blogger >> Template >> (Create a backup in case anything went wrong).
• Select Edit HTML >> Proceed.
• Now with in the Template Search for ]]></b:skin> (CTRL+F Shortcut to quick search) and just above it paste the following CSS Coding. OR Paste the given below code into Blogger CSS section, goto: Template > Customise > Advance > CSS , after pasting the code, click 'Apply to Blog'.

CODE:

.Label a{
padding-left:10px;
background:#33CCFF;
padding:0 10px;
color:#fff!important;
height:26px;
line-height:26px;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;
margin-left:1px;
margin-top:1px;
font-size:13px; }
.Label a:hover{
background:#FF0066;
-webkit-border-radius: 100px;
-moz-border-radius: 1px;
border-radius: px;
}

* To Change the Background Color Replace #33CCFF; with any color according to the desire needs.
* To Change the font Hover Colour replace #FF0066; according to your needs.
* You can also change the shape of hover button by changing 100px to 1px "-webkit-border-radius: 100px;" 

All Done: After customizing save the template. Go a head and check out your website and we are sure that you would love the modification that we have made in the Label Cloud. Feel free to leave your comments and suggestions.