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.
- Now follow these Label gadget settings:
Show = All Labels
Sorting = Alphabetically
Display = Cloud
- Uncheck Show number of posts per label.
- Save your gadget and you’re done.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
0 comments:
Post a Comment