Customize Cloud Labels Into Bricks Using CSS

Having  a label(s) in our posts is a vital part in order to let our readers be easily directed to what tutorials they want to read in our blog. In order to  make your labels  be presentable we need to add CSS on it. In this tutorial, I will show you on how to style your label in a form of bricks like appearance. The code below can be customized in several manner to create exciting label designs. You can also add background images to them.
Live Demo

Customize Cloud Label Into Bricks Using CSS

Check Also:
How to Customize Labels in Blogger (Another Version Using CSS3!)
Follow the easy steps below:
Step 1. Go to Blogger > Settings> Layouts
Step 2. Click add a gadget and choose Labels                  
Inside the settings make sure to choose the cloud display. You may set other options as per your requirement. See the screenshot below as example

Note: Too much labels on homepage look awkward. Showcase your best categories only.

Step 3. Now save the widget and go back to Blogger Dashboard settings
Step 4. Click Template ( have a backup of your template for your reference)
Step 5. Click Edit HTML
Step 6. Search for the code below

]]></b:skin>

 Step 7.   Just above the code in Step 6, paste the following CSS code:

/*-----Bricks Style Labels Cloud Widget by Bloggingtipsandtrix.blogspot.com----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}

.label-size a  {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover  {
text-decoration: none;
}

Optional Customization:

• If in case you want the label boxes to be of random sizes depending on the post-count then simply delete font-size:10px; from the above code.

Step 8.  Save your template and you are  done!
Visit your blogs and look your new  labels  with a new professional looks.
Hope you find this tutorial a helpful one and if you have some questions regarding this post, feel free to leave it in our comment box. I will try my best to answer your queries.

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook