--> Blogger Tricks

Wednesday, October 30, 2013

Widgets

Customize Label in Blogger - Cloud Form

Views:
 Things to do:

1. Add gadget --> choose "Label"
2. Label Config: Display --> Cloud
3. Save template

Adding CSS:

1. Go to your dashboard --> Edit HTML
2. look for ]]></b:skin>
3. Above it paste the code below.


/*-----Custom Labels Cloud widget by www.MyBloggerTricks.com----*/
.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:10px;
color:#666;
}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out; 
-o-transition: all 0.5s ease-out; 
-webkit-transition: all 0.5s ease-out; 
-ms-transition: all 0.5s ease-out; 
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg); 
-o-transform: rotate(7deg); 
-webkit-transform: rotate(7deg); 
-ms-transform: rotate(7deg); 
transform: rotate(7deg); 
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1; 
}

.label-size a  {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover  {
text-decoration: none;
}

4. Save your template.

Congratulation! You now have a customize cloud label.

Source: Mybloggertricks
Comments
0 Blogger Comments

About Us


Hi! We are the vBLogger Lab Team. Freelance Blogger and an addicted Web Developer.
Thanks to all Followers and our lovely Visitors...Read More

vBloggerLab Stats

Widgets for Blogger

Followers

Don't Forget To Join US Our Community
×