Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » How to Customize Labels Cloud in Blogger

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 Customize Labels Cloud in Blogger

How to Customize Labels Cloud in Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

2,320 views

Labels Cloud enables users to use a dynamic menu, and it has become very popular as a website add-on. In this featured trick, Mohammad Mustafa Ahmedza i shows you how to customize labels cloud in Blogger that will turn the random cloud display into blocks.

 

  1. Go to Blogger Dashboard > Settings > Layouts
  2. Click Add a Gadget > Labels
  3. Select Cloud Display once you’re inside the settings.
  4. Choose to display 25 labels at most because too much would look awkward.
  5. Save widget. Go to Settings > Template
  6. Backup your template.
  7. Click Edit HTML > Proceed then look for:
]]></b:skin>
Paste the code provided below just above the code in no. 6
/*-----Custom Labels Cloud widget by www.MyBloggerTricks.com----*/
.label-size{ 
margin:0 2px 6px 0; 
padding: 3px; 
text-transform: uppercase; 
border: solid 1px #C6C6C6; 
border-radius: 3px; 
float:left; 
text-decoration:none; 
font-size:10px; 
color:#666; 
}

.label-size:hover { 
border:1px solid #6BB5FF; 
text-decoration: none;
-moz-transition: all 0.5s ease-out;  
-o-transition: all 0.5s ease-out;  
-webkit-transition: all 0.5s ease-out;  
-ms-transition: all 0.5s ease-out;  
transition: all 0.5s ease-out; 
-moz-transform: rotate(7deg);  
-o-transform: rotate(7deg);  
-webkit-transform: rotate(7deg);  
-ms-transform: rotate(7deg);  
transform: rotate(7deg);  
filter: progid:DXImageTransform.Microsoft.Matrix( 
 M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); 
zoom: 1;  
}

.label-size a  { 
text-transform: uppercase; 
float:left; 
text-decoration: none; 
}
.label-size a:hover  { 
text-decoration: none; 
}

8. Save template

Note: If you want the label boxes to be random sizes, delete font-size:10px; from the code provided above.

Liked It ? Please Share

Comments

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

  1. isa koc says:

    How to demo url?

  2. eyoon masr says:

    great Tutorial thanks for sharing

  3. Hello, It did not work on my blog. Hug!

  4. فطوطة says:

    thank’s alot it’s kind of u

  5. syed says:

    can you please help me how to add a border line around the body of the blog please

  6. Lesa McMahon says:

    Thank you! It works perfectly and fits seamlessly into my blog design. I’m super thrilled. I’ve been looking for this hack for days. Thank goodness I finally found it.

  7. I’ve been exploring for a little for any high quality articles or weblog posts in this sort of area . Exploring in Yahoo I at last stumbled upon this web site. Reading this info So i am satisfied to show that I’ve an
    incredibly excellent uncanny feeling I discovered just
    what I needed. I so much definitely will make
    certain to don?t forget this web site and provides it a glance on
    a relentless basis.

    Have a look at my webpage; free rpg online games for pc

  8. Bruce says:

    Great information we will add this to our web site at http://www.labeldiscount.co.uk , thank you very much

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