Friday, 31 July 2015

How To Add Customize Blogger Cloud Label Widget

Have you been wondering how you can add customize blogger default cloud labels widget to your blog, 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 are the steps to guide you 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 below, just above ]]></b:skin>

.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 your new labels widget running on your blog. I hope this post was helpful, Please express your views by leaving comments.

If you liked this guide, please share it with your friends and family.

No comments:

Post a Comment

Are you Confused? Feel free to ask.
Your feedback is highly appreciated. I will try to reply to your queries as soon as possible. Drop in Your Comments, Problems, Suggestions, Praises BUT DONT Spam. Enjoy!!. THANKS