Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » How to Have A MetroStyle Cloud Label Or Categories List

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How to Have A MetroStyle Cloud Label Or Categories List

How to Have A MetroStyle Cloud Label Or Categories List

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,732 views

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!

Liked It ? Please Share

Comments

6 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. As the admin of this web site is working, no
    doubt very shortly it will be famous, due to its quality contents.

  2. I don’t even know how I finished up here, but I thought this submit was great. I do not understand who you are but certainly you’re going to a famous
    blogger for those who aren’t already. Cheers!

  3. Hello! I just wanted to ask if you ever have any problems with hackers?
    My last blog (wordpress) was hacked and I ended up losing months of
    hard work due to no back up. Do you have any solutions to prevent hackers?

  4. hi!,I like your writing so so much! proportion we keep up a correspondence extra about
    your post on AOL? I need a specialist in this area
    to resolve my problem. May be that is you! Taking a look ahead to see you.

  5. web site says:

    You’ve made some really good points there.
    I checked on the internet for more info about the issue and
    found most people will go along with your views on
    this web site.

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here