Wednesday 21 November 2012

How to add CSS3 cloud label style with hover effect for blogger

Today I’m going show how to add attractive css label style and hover effect.
Actually there are two types to add CSS to your blogger which prefer for easy
1st one:
Step:
Login to your blogger account
Follow these steps
Step1:
Go to template
Step2:
Click customize and go to advanced tab and click add CSS
Step3:
Copy and paste the below code


/*design the box or label, change the font size adding border turn to upper case etc.*/
.label-size

{

background-color:;
padding:1px;
border:1px solid #00a0b1;
margin:0 2px 6px 0;
padding: 3px;
font-size:14px;
text-transform: uppercase;float:left;
}
/*this is for hover effect*/
.label-size:hover
{
border-radius:3px;
text-decoration: none;
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);}
/*for remove underline when hover the text*/
.label-size a
{
text-decoration:none;
float:left;
}

Step4:
Click apply blog
Step5:
You can change the value as you like
2nd method:
Step, step1 are same go to template and click edit html
Step2:
Find this tag and paste the above code before this

Step3:
Save the template