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!
