How to Have A MetroStyle Cloud Label Or Categories List

 How to Have A MetroStyle Cloud Label Or Categories List

So in one of our previously featured Blogger tutorials you learned how to add a social sharing widget which design is inspired by Windows 8’s Metro-style UI. This time, you’ll learn how to design your Categories or Labels list in a similar fashion.
Sidhnath Sinha of TricksHunt came up with the CSS design so credit goes to him.
Follow the steps below.
From your Blogger dashboard, go to Design and then Template.
Choose Edit HTML then click on Proceed.
Using Ctrl+F, look for ]]></b:skin> in your blog’s template code.
Copy/paste the following code right above ]]></b:skin>

/*--- TricksHunt.com Custom Label Cloud --- */
.Label a{
padding-left:10px;
background:#0090D5;
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:#69625A;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: px;
}     

TIP: To change the label color, simply replace #0090D5 with the corresponding HEX code of your preferred color. To change the color of the label upon mouseover or on hover, replace #69625A. You can also change 13px t adjust the font size.
Save your template.
Next, go to Layout, click on the Edit button of your Labels gadget.
NOTE: If you currently have no Labels gadget then just click on an Add a Gadget button and then scroll down the list of gadgets and select Label.
Now follow these Label gadget settings:
Title = Labels
Show = All Labels
Sorting = Alphabetically
Display = Cloud
Uncheck Show number of posts per label.
Save your gadget and you’re done.
View your blog to see the effect. Enjoy and have a good day!