Customize Blogger Cloud Label Widget

Have you ever wondered How to customize blogger default cloud labels widget then you are on right place. Here is a awesome looking labels widget which is fully compatible with blogger and loads pretty fast.

custom blogger cloud label widget

Today I'm going to show you how can do that on your blog. Below is the step by step guide for installation of this widget.

How to Implement this on your Blog.

Step 1: First Login to your Blogger Blog, Go to Layout > Add a Gadget.

Step 2: Choose Labels Widget.

Step 3: Before Saving the widget, Make the following changes and Save it.

Step 4: Now Go to Template > Edit HTML (Before editing template It is always recommended that you Back it up first). Now search for the following code (Ctrl+F)

Step 5: Paste the following code above
 margin:0 2px 6px 0;
 padding: 3px;
 text-transform: uppercase;
 border: solid 1px #C6C6C6;
 border-radius: 3px;

.label-size:hover {
 border:1px solid #6BB5FF;
 text-decoration: none;

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

Step 6: Now Save Template.

Enjoy new labels widget running on your blog. I hope this post was helpful, Please express your views by leaving comments.


About Jimmie Luthra

Jim Luthra is a Third Officer in Merchant Navy and Chief Editor of, He is a Blogger, Guitarist, Painter, Book Lover, Tech Geek, Basket Ball Lover, Traveller and Fitness Freak. He loves Traveling and Adeventure Sports.
    Blogger Comment
    Facebook Comment