12 July, 2010

Change color and size of default tag cloud in blogger

It is known that we can use a gadget option "Labels" to Blogger, to show our tags in a cloud . It so happens that yesterday I received two emails on the same subject: how to change the design of the cloud once added to the blog, so we'll see in this post how.
blogger tag cloud
Once you add a gadget in the sidebar, a tag cloud will have a default layout that fits, more or less to the rest of the sidebar.
To change the size, text color, separation, etc.we should add a few lines of CSS in the template, as always will before ]]></ b: skin>


.cloud-label-widget-content {
text-align:center;
font-weight: bold;
}
.cloud-label-widget-content span {
padding: 0 0 0 5px;
}
.label-size-1 a {color: #8b8989; font-size: 10px;}
.label-size-2 a {color: #000000; font-size: 12px;}
.label-size-3 a {color: #4682b4; font-size: 14px;}
.label-size-4 a {color: #dccdc; font-size: 15px;}
.label-size-5 a {color: #6495ed; font-size: 18px;}
Modifications :
.cloud-label-widget-content { 
Controls the design of the container of the cloud, the tags in my example would be centered and bold.

.cloud-label-widget-content span {
Controls the distance between the labels, in my example 5 pixels apart.

.label-size

Here we control the text color and size of each of the labels, according to the five options that the gadget provides.
In this case we do, is to include the CSS to add between <style type='text/css'> and </ style> and place it right after the label template <body>.

9 comments:

  1. I tried following this and everything worked besides the color and size. aka it only made it bold! I sent you an email, please respond to it. thanks

    ReplyDelete
  2. i used your code. label cloud appear at the center. i want labels to appear from the starting side. That is i want label cloud to start from the left side..what should i do?

    ReplyDelete
  3. @d

    In the code i provided ....There is a css for Text allignment text-align:center;

    Change this to text-align:left;

    .cloud-label-widget-content {
    text-align:center;
    font-weight: bold;
    }

    ReplyDelete
  4. its so nice post
    http://www.drupalnetworks.com/

    ReplyDelete
  5. thank for share http://f69dkm.blogspot.com

    ReplyDelete
  6. nice tips... how can we implement it to our wordpress blog???

    ReplyDelete


Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.
Thanks for reading,
Admin