Tag Style Cloud Label Widget For Blogger

Monday, 23 June 2014

Tag Style Cloud Label Widget For Blogger

Cloud label widget is one of the mostly used widget by bloggers. It helps to increase Page views. It shows the tags added into your blog. Tags which have added by you will show your blog contents. If it shows attractive to your blog visitors, they may surf your blog again and again. Here I had added tag style cloud labels widget for blogger blog. It will impress your audience and it will make your blog as professional & stylish. You can customize label color and style by changing in code for your blog template.

Let me explain how to add tag style cloud widget to your blogger blog. Follow the simple steps given bellow.

Installation Guide

Go to Blogger Dashboard --> Layout ---> Add a gadget ---> Labels

Choose the display option as Cloud

After adding this cloud label widget in blogger follow these below steps to add Css code for cloud label widget to your blog template.

Adding Css Code To Template

Step 1: Go to Blogger Dashboard in your blogger account.

Step 2: Click on the Edit HTML button to extract your blog template.

Step 3: Search for ]]></b:skin> using Ctrl+F in Notepad.

Step 4: Copy the following code and paste the code above it.

/*-----YEAHGOTIT.BLOGSPOT.cCOM label wrap starts--------- */
.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}
.label-size a:before{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #008900 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}
.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555;}

Note:
Change the appearance of this cloud label widget by customizing above CSS code as your wish for matching with your blog template.

Step 5: Click on Save template button.

That's all. You are done!

If you like this post share it. If you encounter any problem, feel free and comment below to get solution. Share your experience with us.