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.
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.
Add CSS Code to Blog 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 ]]>
Step 4: Copy the following code and paste the code above it.
/*-----www.DJMazapro.co.vu 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.
working thanks
ReplyDelete