Add Hover Effect on Blogger Header Title text or Logo

Add Hover Effect on Blogger Header Title text or Logo
hover

Adding hover effect on blogger images is very effective because with this we can add extra spice on different images and widgets. We have already got many tutorial for adding hover effect on blog. But today I will share with you that how we can add hover effect on blog header. This effect will work on both text and logo. Suppose you have used text on your blog title so if you follow this trick then it will create a hover on your blog title. Similarly if you are using a logo on your blog then after adding this trick your blog logo will get a hover effect. I think you have already seen that I have added this effect on my blog logo. So I am revealing the secret. Before proceed to the main tutorial you can check my blog logo.  When you mouse over on that it will change position like hover. For adding the hover effect on blogger header Title text or logo just follow the simple steps. 


Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML-> Unfold code  

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Copy the code from below and Paste it  Before/above ]]></b:skin>

/*Tricks By http://www.bloggerspice.com*/
#header-inner:hover{
-webkit-transform: scale(0.95,0.95);
-moz-transform: scale(0.95,0.95);
-o-transform: scale(0.95,0.95);
-ms-transform: scale(0.95,0.95);
transform: scale(0.95,0.95);
}


Step 5 Now Save the template
Go Up