How to Customize the Blogger Label Cloud - Change Font Size, Font Colors, Add Border Around Each Label

Today's tutorial is a very simple CSS code tutorial. There is very little editing to be done. There are two codes I'm going to share today. One Changes the font size and adds borders. And the other changes the colors.

I'm guessing if you are reading this tutorial you already have a label cloud widget. If you don't they are simple to add.


To Add A Label Cloud
 
1. Go to Dashboard>Layout>Click Add A Gadget where you'd like your cloud to go

2. Scroll down and select Labels>Choose how you'd like the labels and organized>Title it if you'd like>Then select Cloud>

3. Click save and move your cloud where you want it if necessary


Now on to customizing the Label Cloud.



 1. The Border and Font Size Code

I got this code form www.mybloggertricks.com and then edited it to my liking. Then because this code pulls from the link section of the template designer I hunted down a second code to change the colors.

 
 /*-----Custom Labels Cloud widget by www.MyBloggerTricks.com----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase; /* Remove this line if you don't want all uppercase letters */
border: solid 1px #C6C6C6; /* Change to Boarder Color of Your Choice. Change the value of 1px to make the border thicker. */  /* Remove this if you don't want borders */
border-radius: 3px;
float:left;
text-decoration:none;
font-size:15px; /* Change Font Size */
color:#666;
}
.label-size:hover {
border:1px solid #C6C6C6; /* Change to Boarder Color of Your Choice. Change the value of 1px to make the border thicker. */ /* Remove this line if you don't want borders */
text-decoration: none; 
}
.label-size a  {
text-transform: uppercase;  /* Remove this line if you don't want all uppercase letters */
float:left;
text-decoration: none;
}
.label-size a:hover  {
text-decoration: none;
}

To customize this code just change the lines with /* Change to __________ */




2. The Color Change the Font Color

I found this one on the google forms for blogger. This one changes the base color the hover color and the visited color. I made mine base light grey, visited darker grey, and hover mint green.


 /*--- Color Cloud --- */
#Label1 a {color:#acacac;} /* Change to Font Color of Your Choice. This is the base color of the text. */
#Label1 a:visited {color:#acacac;text-decoration:none;} /* Change to Font Color of Your Choice. This is the color of the text after the link is visited. */
#Label1 a:hover {color:#cdffc8; text-decoration:underline;} /* Change to Font Color of Your Choice. This is the color of the text when you hover over it. */ 


To customize this one it's the same as the first. Change the color code for each line. If you want the links to be the colors of link colors in your theme you don't need this code.




3. Adding the Codes


Adding the codes is simple. Just a copy and paste.Then edit it to your liking.

1. Go to Dashboard>Template>Customize>Advanced>Add CSS

2. Copy and paste the codes into the CSS box.

3. Edit the codes where prompted. With CSS you can see your changes live so if everything is to your liking click "Apply to Blog"






And that's that. A customized label cloud. Quick and simple. Now all of the font is the same size, you can change your colors without changing all of your link colors and now there are cute little borders around each label.
    

Thanks for reading this post! I hope you enjoyed! If you have any questions or concerns please feel free to message me.

Twitter | Instagram | BlogLovin | Facebook