How To Customize Label Cloud in Blogger With CSS3 Effects

Advertisements
Are you fed-up because of the yucky Label Clouds that appears at the sidebar of your Blogger Blog? Sometimes, a dirty looking Label cloud could horribly dent the complete outlook of a website. Consider a website that has a neat and stylish look but if the Label Clouds is unclean then, it could literally kill the complete viewpoint of a reader. Since, the default Labels Widget of Blogger Platform does not have a clean and elegant look. Therefore, we have to customize it with the help of CSS. As the whole blogger community is busy in upgrading their site with CSS3, it is essential that we also make use of this tremendous Language. For that reason, today in this article, we will learn How to Customize Labels Cloud in Blogger with CSS3.

The Default Label Cloud Widget for Blogger Platform has a quite old look. Since, we are in the days of CSS3. Therefore, we have to apply latest techniques. Consider the Following screenshot to see the Label Clouds i.e. the Default one and the Customized one. 
Older/Newer Label Cloud
Each Label Cloud Link is well kept under <a class/> that allows us to customize each and every Label link cleanly. We have also assigned a font size, so it does not overlap the pre-existing Default StyleSheet. Our custom design would override the CSS. Thus, it would give an entire new look.

How To Customize Label Cloud with CSS3?

The steps mentioned below are fairly straightforward and would hardly take few minutes to complete. Consider the following instructions as mentioned below. 
  • Go To Blogger.com >> Your Site >> Add a Gadget >> Label.
  • Now match the settings which are shown in the screenshot below.
Custom Label Cloud Setting For Blogger
  • Select the Cloud from the Display settings.
  • Uncheck the Show number of post per label.
Now go ahead and Save the widget and that’s it we have successfully integrated a Label Cloud widget.

Customizing and Stylizing Blogger Label Cloud Widget:

  • Once again go to Blogger >> Template >> (Create a backup in case anything went wrong).
  • Select Edit HTML >> Proceed.
  • Now with in the Template Search for ]]></b:skin> (CTRL+F Shortcut to quick search) and just above it paste the following CSS Coding.
/*--- MBL Custom Label Cloud With CSS3 --- */
.Label a{
padding-left:20px;
background:#000;
padding:0 20px;
color:#fff!important;
border-radius:100px;
-moz-border-radius:100px;
height:32px;
line-height:32px;
text-transform:uppercase;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;
margin-left:5px;
margin-top:5px;
font-size:14px; }

.Label a:hover{
color:#000 !important;
background:#ff0; }

To Change the Hover Color Replace #ff0; with any color according to the desire needs.
To increase/decrease the font size replace 14px according to your needs.

All Done: After customizing save the template. Go a head and check out your website and we are sure that you would love the modification that we have made in the Label Cloud. Feel free to leave your comments and suggestions.

From The Editor's Desk:

Hope everyone has enjoyed this small modification. Now everyone can sense that a Small Chunk of CSS3 has the charm to spice up a website. Its just a starting to this week because we have some awe-inspiring widgets coming up. What are your thoughts about it. Suggestions would be more then welcome. Take a lot care till then, Peace, blessings and happy stylizing.



Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

31 comments

January 7, 2013 at 11:24 AM

So lovely and useful..customized and ready to use,would u like to check it out?
http://degmesinyagliboya.blogspot.com/
Thanks a lot..

Editorial Team MOD
January 7, 2013 at 11:27 AM

Great Man. Looks Awesome :).

January 7, 2013 at 4:44 PM

Very unique , thanks bro . I removed the round borders.looks great.thanks a ton

www.YourpcGenie.net

January 8, 2013 at 12:16 AM

it is not working on my site :(

January 8, 2013 at 12:17 AM

it is working 4 u

January 8, 2013 at 1:36 AM

better than mbt... ;)

January 8, 2013 at 1:41 AM

Hi Syed bro,

Nice Hack But It only works with the widget which has the widget ID1 (i.e. Labels1)
Otherwise it doesn't work. (i.e. Labels2, Labels3)

To fix it We have to change the #labels1 with .Label

Hope you check it. Thanks for the Awesome hack. :)

January 8, 2013 at 3:01 AM

nice work bro

January 8, 2013 at 3:13 AM

plese give me a Demo dear faizan bro

January 8, 2013 at 5:45 AM

hey bro am from Nigeria, pls I need traffci.... Pls any help???
www.odulowo.blogspot.com

Editorial Team MOD
January 8, 2013 at 7:43 AM

Well, Most of the users only use one Label Widget therefore, we coded it for just LABEL1. However, we have many people are having problems therefore, we have updated the coding.

Thanks for Sharing a Great tip with our Readers Peace.

Editorial Team MOD
January 8, 2013 at 7:44 AM

Reapply the Tutorial, It would work. Surely. Peace

Editorial Team MOD
January 8, 2013 at 7:45 AM

1. Get a .com Domain.
2. Write more Content.
3. Socialize your Site.
4. Post on Daily Basis.

Apply the Above Tips your Traffic would flow like a Sports car. Peace

January 8, 2013 at 5:32 PM

If you are a professional blogger you didn't delete my comment..

PEACE!!!!!!!!!!!!!

Editorial Team MOD
January 8, 2013 at 5:50 PM

Your Comment Was Automatically Caught up in our Spam Box. You used irrelevant Links in Comments which is Against our comment Policy. The Main reason behind having a Comment policy is to provide a Safe and Sound environment to all fellow readers.

Take a Look and Spend few minibus in reading this Policy.
http://www.mybloggerlab.com/p/comment-policy.html

We're not discouraging you to not make a Comment but try to be expressive. Write a Comment that could benefit everyone. Hope that helps mate. Take care. Peace

January 9, 2013 at 1:53 AM

Dude.. Can I please submit a Guest Post on MBL? I mean, please provide your email to me and I would send one. And you can publish it here with my link... as you know I am working hard but all my effort is going in vain due to SEO! :(

January 9, 2013 at 4:32 AM

i mistakenly spoiled my blog template is there anyway i can restored or reset it the way it is in the first time.

January 9, 2013 at 4:32 AM

i forgot to back it up the first time

January 9, 2013 at 5:14 AM

Bad luck.. It can't be restored bro.. :(

January 9, 2013 at 5:15 AM

please reply!!!!

Editorial Team MOD
January 9, 2013 at 9:14 AM

What You Did Wrong? Tell your Site URL?

January 19, 2013 at 9:43 AM

Thanks @Syed for this css3 style. I am using this effect on my blog you can check it on my blog.

My Blog : SDWallPic.Com

April 8, 2013 at 11:38 AM

Thank you very much for this tutorial , I just have a problem in finding the required label widget .Please could you help me ?

My blog : jquery-tutorial-for-beginners.info

Editorial Team MOD
April 8, 2013 at 2:18 PM

Can you Explain a little better, so we can help you accordingly.

April 11, 2013 at 8:32 AM

I just solved the problem , It works well !!

Thank you so much.

June 23, 2013 at 4:23 AM

Thanks god, at least something that works :).

July 28, 2013 at 9:55 AM

Loved it !!!... Thanks

July 31, 2013 at 6:52 PM

Hey, I tried your tutorial and applied the code in my template but it doesn't worked in my blog. But I hate it when I found in my "Template" section which is "Live on Blog" there's the picture of "Templateism" instead of my own blog. What did you put on that code? did you put autobacklinks? and how I can remove "Templateism" - Live on blog and replace it again with my won Blog?

PLease.. I want to remove "Templateism" I hate it!

Editorial Team MOD
August 1, 2013 at 8:40 AM

Can you provide your BLOG URL. and it only appears when you remove credit backlinks.

January 18, 2014 at 1:21 AM

Beautiful...I love it!

I'd like to mention that you can also add this code another way. Simply go to:

Template > Customize > Advanced > Add Css > Paste the code in the box > Click on orange "Apply to Blog" button

By doing it this way, you can see any changes you make live in the preview below.

Thanks for sharing this awesome tut :-)

Editorial Team MOD
January 18, 2014 at 9:55 AM

Glad you liked it Marie

Thanks for the tip, useful :)

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.