Now i am going to tell one of the most important technique to change your blog style as the your wished style .
Today we will present an awesome blue colour cloud label widget which we have personally implemented on www.alltechvillas.com Since from a long time we have received budles of email from reader to share the our labels widget with us.
Now follow the steps as below you can easily change the style of your template.
Here is all the beginner steps that you will learn how can we apply any Css designing to labels widget.
Why do we need Label ?
This widget help us to show all the related posts of the same category by single button. So we could easily click on desire niche label to view all the posts of related topics. So in this way we can find multiple posts of the same topic with single label button.
step :1Go to the below mini steps
- Go to blogger dashboard:
- Go to Template>>Edit/Html:
- Now Search for ]]></b:skin> tag
- Past the below given code before ]]></b:skin> tag
.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 #0089e0 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
transparent transparent;}
step :3
step :4
Now you can see the this in your wished colour so that you can be made on your own please try this technique and you can be as the same style as below
Any queries;
Guys if you found any bugs or face any difficulty in implementation then do not hesitate to post your problem in comment section. we will back your response as soon as possible.Thanks and happy blogging !
