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 below right above it.

 
/*--- 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!