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 */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".
.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;
}
Example (MyFunDarkSide Labels Cloud CSS):
/* Label size on the tag cloud */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.
.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; }
Follow @pyblogger
Share This Post.....
Logging you in...
