How To Give A Tilt Effect To Your Header In Blogger?

Hello everyone. Have you seen our logo? When you would place your cursor on it, then it would smoothy tilt a little. In this post we would show you how to give the same effect to blogger blogs. We would write a tutorial on wordpress as soon as we decode the header code of wordpress. Till then, enjoy this tutorial...

How To Give A Tilt Effect To Your Header In Blogger?

Go to Blogger > Template > Edit Template
Search for /b:skin
Place this code just above it:

.headerleft:hover {

width: 450px;

float: left;

margin: 0px;

padding-top: 30px;

height:80px;

-webkit-transform: rotate(-1deg) scale(1.02);

-moz-transform: rotate(-1deg) scale(1.02);

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

The above code would only work when you have right id element in your template. To find which id element is your template using, find this code:

 type='Header'

Now, replace the bolded red code in the CSS script with the text in your template as shown in picture:

Save Your Template!


Note: For best results, use IMAGE as header.
Enjoy!!