Add Customized Blogger Cloud Label Widget

  Add Customized 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.

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.