Create A Metro Style Cloud Label Or Categories List For Blogger

Create A Metro Style Cloud Label Or Categories List For Blogger

Perfect Cloud Label Style For Metro UI Blogger Template

This tips help you custom your Label Cloud or Categories into a Metro UI Style Label same as Windows 8 Only for Blogger & specially for Metro UI Blogger Template. For Demo Check Side bar of my Home Page.

1. From your Blogger dashboard, go to Design and then Template.

2. Choose "Edit HTML" then click on "Proceed".

3. Combine Ctrl+F, look for ]]></b:skin> in your blog’s template code.

4. 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 Color Generator 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!