CSS Code for Blogger Tag Cloud (Labels)


Love all the ready to use widget created by blogger. However the catch is, those widget are given as is, come up with next to none customization. Hence again I Googled around the net. Some results are hard to understand and some, some are very technical and some, manipulating the code with the completely different way. In the end, I managed to get the default CSS for the tag (or tag cloud, or named by blogger as labels).

Here is your blogger label default CSS:
/* Label size on the tag cloud */
.label-size-1 {
font-size:80%;
opacity:0.8;
}
.label-size-2 {
font-size:90%;
opacity:0.9;
}
.label-size-3 {
font-size:100%;
}
.label-size-4 {
font-size:120%;
}
.label-size-5 {
font-size:160%;
}
/* General features in the tag cloud */
.cloud-label-widget-content {
text-align:justify;
}
Place the CSS code above into any part of your CSS, between <head> and </head>. Since Labels are always placed on sidebar, I recommend you to place the code just below the sidebar CSS. Label size ranging from the smallest 1 to the biggest 5.You can change the opacity and font size percentage to any value as you wish. The default text align is justify, you can either change it to the "left" or to the "right" or "center".

Example (MyFunDarkSide Labels Cloud CSS):
/* Label size on the tag cloud */
.label-size-1 {
font-size:90%;
opacity:0.8;
}
.label-size-2 {
font-size:100%;
opacity:0.9;
}
.label-size-3 {
font-size:110%;
}
.label-size-4 {
font-size:120%;
}
.label-size-5 {
font-size:130%;
}
/* General features in the tag cloud */
.cloud-label-widget-content {
text-align:justify;
}

.label-size-1 a:hover,
.label-size-2 a:hover,
.label-size-3 a:hover,
.label-size-4 a:hover,
.label-size-5 a:hover { color:#FFFFFF; background-color:#336699; text-decoration:none; }
As you can see, I changed the font-size percentage, also included an extra hover (text mouseover) effect CSS - white text with blue text background and no text underline. Interesting right? Go and try it by yourself.

4 comments:

  1. Cheers for this. Just about the only place I can find this info! :)

    ReplyDelete

  2. Great post i really appreciate this post because a student i really want to become a
    Web Designer and i'm looking also Wordpress Courses i was planning
    to learn more about wordpress also. but anyways i will keep update your site for more free informative post. thanks for this post it helps me a lot.


    ReplyDelete