Blogging Tutorial

The basic CSS codes for Blogger label cloud is like the following:

.label-size-1 a { }
.label-size-2 a { }
.label-size-3 a { }
.label-size-4 a { }
.label-size-5 a { }

You can see that there are 5 levels of letter that you can customize, .label-size-1 a is the smallest and .label-size-5 a is the biggest. With the basic CSS codes, of course, you can add the setting and modification on your Label Cloud, but you have to be more familiar with the CSS codes. The example of CSS code to set up the display of Label Cloud:

.label-size-1 a {
font-size: 12px;
text-decoration: none;
}
.label-size-2 a {
font-size: 14px;
text-decoration: none;
color:#cd9f01;
}
.label-size-3 a {
font-size: 15px;

font-family: Arial, Tahoma, Verdana;

text-decoration: none;
}
.label-size-4 a {
font-size: 18px;
font-weight:bold;
text-decoration: none;
color:#ea5a04;
}
.label-size-5 a {
font-size: 24px;
text-decoration: none;
}

.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 { text-decoration:underline }

If you have been so familiar with CSS code, simply add any other modification and setting on the code.

Below is how to enter the CSS code into your template:

1. Please Log in to blogger account with your ID
   
2. Click Layout.
   
3. Click Edit HTML tab
   

4. Copy and paste the code below exactly above the code ]]></b:skin>

   
   
   
   
   

   
   
   

   
   
   

   <br /><br />.label-size-1 a {<br />font-size: 12px;<br />text-decoration: none;<br />}<br />.label-size-2 a {<br />font-size: 14px;<br />text-decoration: none;<br />color:#cd9f01;<br />}<br />.label-size-3 a {<br />font-size: 15px;font-family: Arial, Tahoma, Verdana;text-decoration: none;<br />}<br />.label-size-4 a {<br />font-size: 18px;<br />font-weight:bold;<br />text-decoration: none;<br />color:#ea5a04;<br />}<br />.label-size-5 a {<br />font-size: 24px;<br />text-decoration: none;<br />} <br /><br /><br />.label-size-1 a:hover, <br />.label-size-2 a:hover, <br />.label-size-3 a:hover, <br />.label-size-4 a:hover, <br />.label-size-5 a:hover { text-decoration:underline }<br /><br /><br />

   
   
   
   
   
   
   
   



5. Click SAVE TEMPLATE button


6. Done

Now view your label cloud. If you did it, the display will be more different from before.

Happy trying!