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)
]]></b:skin>

Step 5: Paste the following code above
.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:15px;
 color:#000;
 }

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

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

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.

SHARE

About Jimmie Luthra

Jimmie Luthra is a Mariner, Tech enthusiast, Blogger and Gadget reviewer. He is fond of technology and is usually found playing with some piece of tech. He is also a Guitarist, Music lover & fitness freak.
    Blogger Comment
    Facebook Comment
The-Area51.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for The-Area51.com to earn fees by linking to Amazon.com and affiliated sites.