Customize Labels Cloud in Blogger

Back in the year 2008 when Blogger.com was moving through several update phases, third party developers would often take the golden opportunity of creating widgets for BlogSpot blogs but as soon as Google rolled out massive changes to their online services, several official widgets popped out which load fast and perform well because the scripts are served by Blogger servers. Page List and label cloud/list enabled designers to create dynamic menus. Since the stylesheet was made accessible. therefore we all got a chance to play with these widgets and transform them completely in look and appearance. We shared tutorials first time on how to create dynamic menus with page list and an automatic menu with label list and today we would share a simple stylesheet that will transform the labels cloud into organized small blocks that rotate on mouse over. I must ensure you that the styles are perfectly compatible in all major browsers including IE8+.
DEMO: Look at the label cloud on the sidebar of this blog

This is how labels look in cloud display:

labels widget blogger

This is how it will look after you apply the new style.

label cloud widget

How it works?

Each label link is nested inside a span tag followed by a class named label-size. If the font-size is not specified the widget changes font-size of each label according to its post-count. Therefore showing big and small clouds. Introducing custom styles would over-ride the exiting styles thus changing the entire look. 

Turn Random Cloud display into Blocks

The code below can be customized in several ways to create exciting label designs. You can also add background images to them.
Follow these easy steps:
  1. Go to Blogger > Settings> Layouts
  2. Click add a gadget and choose Labels                     
  3. Inside the settings make sure to choose the cloud display. You may set other options as per your requirement. See the screenshot below as example 
labels settings

Please choose to display at most 25 labels. Too much labels on homepage look awkward. Showcase your best categories only.
       4.    Now save the widget and go to settings > Template
       5.     Backup your template
       6.     Click Edit html > Proceed  and search for this
]]></b:skin>
        7.   Just above it paste the following CSS code:
/*-----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 your template
         9.    All done!
Visit your blogs and see the labels completely transformed to small neatly crafted rectangular boxes. If in case you want the label boxes to be of random sizes depending on the post-count then simply delete font-size:10px; from the above code.

Need help?

I am sure the installation of this tweak wont trouble you a lot, if in case you needed help in changing the font colors on active, hover and visited modes then let me know. By default the visited link will turn black, unlinked and would also not rotate. Click any of your label links and see that page to check this effect.
I will be posting normal tutorials on plugins and widgets and I have got some new SEO tweaks for blogger blogs that would further improve your SERP ranking. I am sure you would love to try them out. Peace and blessings pals :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

88 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. My God.... I swear I was just looking to learn this and share a tutorial on my blog but you already did it. No problem I will come with something different then :)

    ---
    Directly Share Blogger Posts On Google Plus FAN PAGE [New Feature]

    ReplyDelete
  2. Please Help Me I Dont Understand How Alexa [traffic Rank] is True or not: look this my blog http://pspgamiing.blogspot.com/ and alexa show me that Alexa Traffic Rank Reputation is 12,645,205
    http://www.alexa.com/siteinfo/pspgamiing.blogspot.com
    Please help me thanx !! :)

    ReplyDelete
  3. We are waiting for your post Mohammed.

    Please man post as many as you can. I like your tuts.

    @bhavesh
    I am waiting for your post. I also liked yours and your blog.

    Please keep up the good work.

    Regards,
    Ahmed Safwan
    ToStartBlogging.Com

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. @Ahmed
    Thanks very much for the appreciation. No need to wait more as one is already published :)
    It was due for tomorrow but anyways published today.

    @Yahia
    Alexa rank will improve once you start getting consistent traffic. If you really wanna grow, then forget the alexa rankings and keep sharing good and demanded games and no doubt traffic will grow and ranks will improve automatically. Keep working and please try getting a custom domain.

    ---
    Directly Share Blogger Posts On Google Plus FAN PAGE [New Feature]
    Slick Css3 Social Sharing Widget For Blogger With Google+ & Pinterest

    ReplyDelete
  6. Cool Effect ...
    Thanks For The Post ...
    How To Get Money

    ReplyDelete
  7. Thanks for d'tutor. i like it very much. ur blog is 1 of my favorite tutor blog. keep it up dude.

    ReplyDelete
  8. i cant express how much happy I am by seeing this awesome Mohammad Post

    Please Keep Writing
    Customize Labels Cloud in Blogger

    ReplyDelete
  9. good widjet bro.it is nice looking.. MyTechPromo.com

    ReplyDelete
  10. It's really a new look to this..thanks for the trick....I love these type of tricks

    ReplyDelete
  11. I most appreciate your blogging tutorials. They are awesome and now this. It is just fantastic.
    <a href="http://bloggingsentral.blogspot.com>Blogging Sentral</a>

    ReplyDelete
  12. Thanks for sharing this one dude!
    It's a great information.
    cloud hosting

    ReplyDelete
  13. The day when i saw this on MBT, i was waiting for the tutorial :)

    ReplyDelete
  14. Thanks for making my site more handsome than before :D

    ReplyDelete
  15. @Haider
    Really??
    Why didn't you requested before?

    ReplyDelete
  16. Any Hack available for Wordpress too?
    Regards,
    Abdulsalam
    Psdloune - Designing Tips & Tricks!

    ReplyDelete
  17. Wow...this is great article... Thanks...

    ReplyDelete
  18. Wow, what a great trick! Thank you so much brother! :D

    ReplyDelete
  19. Very Nice , Thanks :)

    www.yourpcgenie.blogspot.com

    ReplyDelete
  20. @Bhavesh

    Really? Then I guess we had been lucky :)
    I has installed this widget a week earlier so you should better speed up with your response time young boy :)


    @Yahia Bouhlel
    Remove popups and unnecessary ads and widgets from your blog, start posting daily and publish quality content. Only then Alexa will hug you openly. :>

    Please read: Post daily to boost traffic


    @Aumkar Thakur
    Always welcomed young bro :)

    @Mrie @bloggingsentral @teniyal garg @arnold @kita

    I am glad you found it useful pals. I am trying hard to spare some time to share more.


    @Haider
    bhavesh is right you should have demanded it! :p



    @abdulsalam
    Sure it can be. Just inspect the classes and change the classes above with the wordpress ones. The plugins there are already a lot thats why we did not publish on WP. :)



    PS: If I have missed anyone, Forgive me :)

    ReplyDelete
  21. @Mohammad
    I saw that just before you made this tutorial. Anyways I will try to get something new :)

    It doesn't matters if you publish first or I publish first, the main thing is that our fellow bloggers are learning, may it be from MBT or TBI :)

    ReplyDelete
  22. @ahmed safwan
    I will for sure try to update you more pal. :)

    @Bhavesh
    Well that deserves respect. Well said sam :)

    ReplyDelete
  23. @Bhavesh Pamecha
    because haider bro knew that Mohammad will publish it as soon as he gets time.

    ReplyDelete
  24. @Mohammad
    :)

    @Rahmeen
    After a long time we meet. You too busy in university?

    ReplyDelete
  25. @Sam
    yeah,long time...your comment frequency is reduced and my visiting frequency:) No, i am not busy but i don't enjoy mbt without you,haider, faizan n mohammad.

    ReplyDelete
  26. @Rahmeen
    Looks like your comment was lost somewhere in the crowd (automatic spam box) but I do know what you commented.

    I too now started to get busy somewhat like Mohammad after the launch of my new blog and sudden increase in popularity of my old books blog. I still try hard to atleast keep an eye on growing spam on MBT.

    I don't if Faizan forgot us as he now a relatively popular blog in his hands.

    ReplyDelete
  27. awaiting tutorial thanks for sharing

    ReplyDelete
  28. @rahmeen ohhhhh How u knew my answer O_o ????

    @bhavesh Yep that's true, i did not demanded because i knew that soon the tutorial will be live on MBT :)

    Have u guys saw my News Show ? Watch it here http://www.youtube.com/skfanclub

    ReplyDelete
  29. @Haider
    Well for that news show I will need to get a new set of speakers as I recently smashed my 6 year old speakers due to frustration :p

    ReplyDelete
  30. After a Long time Muhammad is Back.Thanks Alot for the post...I was trying to get this by searching through the template!

    Nice Post Dude!

    Blogging Tips

    ReplyDelete
  31. This comment has been removed by the author.

    ReplyDelete
  32. It's exactly what I'm looking for ... I've applied your trick to
    my blog: http://www.cuanhcuem.net .
    Thanks a lot!

    ReplyDelete
  33. Thanks MBT
    Excellent Site, with lots of information on Topics we need to understand.

    http://www.sharingship.com/

    ReplyDelete
  34. @Haider Afridi
    To tell you the secret; i was also waiting for this post but did not ask for the same reason

    ReplyDelete
  35. This comment has been removed by the author.

    ReplyDelete
  36. Wao nice post buddy :-)

    MUST DO THINGS TO KEEP YOUR FACEBOOK ACCOUNT SECURE :
    www.funinventors.com/2012/07/secure-facebook-accont.html


    HOW TO POST ANIMATED PICS ON FACEBOOK ?? :
    www.funinventors.com/2012/07/how-to-post-animated-pics-on-facebook.html

    ReplyDelete
  37. It Is Not Working For My Blog...

    ReplyDelete
  38. click here to know your way to happiness...

    how to be happy

    ReplyDelete
  39. Thnx bhai ..
    I was searching for thsi type ...
    nowadays any blogging doubts or needs i just log on to your site :D ....
    You,guest bloggers,this blog and itz posts RoCkzz ..

    ReplyDelete
  40. Hey Mohammad,

    Is there way to customize specific label gadget of blog using the above design?

    Thanks in advance for great tutorial on MBT.

    ReplyDelete
  41. Superb.............

    How to set background color into them..??

    Visit here please :-
    www.amit4u.com

    ReplyDelete
  42. Thanks to share Mr Muhammad .. Iam from indonesia please visit my blog :D

    ReplyDelete
  43. Thanks for this info, all I just needed to do was to change the font size and the border color to suite my template.
    Thanks again.
    www.internetinvestmentideas.com

    ReplyDelete
  44. thanks works great :) check it out http://r4ndomshit.blogspot.co.uk

    ReplyDelete
  45. @Tanmay Kapse

    cant use it at my blog.....paksasuaf.blogspot.com....guide me please

    ReplyDelete
  46. than you very much for making some simple and easy post easy to understand . my blog for download android apps and games and more in apk file blog: Topandroidag.blogspot.in . keep working...

    ReplyDelete
  47. Nice MD. I also write a post about this trick, check it out. Visit Here.

    ReplyDelete
  48. Thanks for tut!

    Add SLIDING TAGS in your blog, see tutorial here
    http://bit.ly/TbvgWg

    ReplyDelete
  49. thnks for your article..i'm very like it

    ReplyDelete
  50. Assalam..Great tutorial. Thanx a lot! :)

    ReplyDelete
  51. ho to add element in right for ads .....???

    ReplyDelete
  52. Oh my God! you guys rock! The design look just awesome on my new blog. I dying do read more for you. Thanks a lot for this great tip and trick.

    ReplyDelete
  53. ı want to ask something. firstly sorry for my bad english. if u click my tags. it will shows all posts about tag. How can I change this number . I want to show tens of

    ReplyDelete
  54. Thanks Mohammad.. I could able to make the label by using your valuable help in my http://www.smashplus.info blog site

    ReplyDelete
  55. Good Posting Friend...

    http://lamabaca.blogspot.com

    ReplyDelete
  56. It made my blog to cool, thanks u admin <3

    ReplyDelete
  57. Thanks for this wonderful information about labels i have used in my blog watch telugu movie online free thatnk u very much

    ReplyDelete
  58. @Mohammad Dear brother I have Mash 2 blogger Template on my blog When I try to Apply these gadghts to my blog then these gadgths are not working on Mash2 blogger template,

    here is my blog link :http://onlinesoftweb.blogspot.com/

    Plz help me waiting for your kind reply

    ReplyDelete
  59. Not working at:

    http://www.lesberatti.tech-gyrl.com
    Added the css just like you suggested and NOTHING!

    ReplyDelete
  60. Hello? Can I please get a reply?

    ReplyDelete
  61. Hello :)

    I am having a bit of trouble. I followed your instructions precisely but it doesn't change anything. Can you please help me?

    ReplyDelete
  62. Really handy, really good tutorial. Thanks! I've just used it on my new blog www.browseronly.net - looks smart in orange :)

    ReplyDelete
  63. super cool!
    thank you very much for this tutorial! :)) I really love your posts <3

    ReplyDelete
  64. You can have a better and stylish Blogger Label tag widget

    Read: Blogger Stylish Label Clod Tag Widget

    ReplyDelete
  65. Not working on my site bro can u help me
    http://www.atozinfo4all.in/

    ReplyDelete
  66. Worked really well. Had some trouble changing the color - #666. I attempted #00000 . IT didnt work. Any advice on customization? like changing color and font, etc

    ReplyDelete
  67. Works well, looks neat and elegant! Thank you

    ReplyDelete
  68. Does this work with list labels?

    ReplyDelete
  69. Sorry, and how to make each label go to a new line?

    ReplyDelete
  70. Thank you. I am new in Blogger and this help me a lot!

    ReplyDelete
  71. Thanks, I couldn't stand seeing those unorganized clouds! Now is all beautiful and effect of hovering over is pretty cool too! Thanks!

    ReplyDelete
  72. thank u worked perfectly

    ReplyDelete