Add Hover Effect on Blogger Header Title text or Logo

Add Hover Effect on Blogger Header Title text or Logo


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*/
-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
MM Nauman says: 7/21/2013

Thanks Brother.

BloggerSpice says: ADMIN 7/21/2013

In response to your request I have shared this code.

MM Nauman says: 7/21/2013

bro you are very wise and honest because many people or admins when somebody ask them to give the same or similar script for particular widget they will not give it or they will make some changes and then they give thank you and please what you thought about text logo.

Parallel Blog says: 7/21/2013

Nice header.
your design is nice and clean. good one

Abdul Samad Essani says: 7/22/2013

Thank You Very Much Bro For This Article See It On My Blog
Blogger Techniches

Abdul Samad Essani says: 7/29/2013

Hey Bro Add Related Post With Thumbnails Like Yours Please Reply Must I Want This Urgently Or Send The Code To My Gmail Id :

BloggerSpice says: ADMIN 7/30/2013

Hi Samad I have already shared this related post. And already using this related post in my several templates. Beside of this many developer are using my this related post--

Unknown says: 12/17/2015

Doesn't Work!

BloggerSpice says: ADMIN 12/17/2015

Please check your Blog header code first. Because different template code use different style. I have used


and in case of your template may be the code will be :t


it varies. depend on template code. but this trick will work 100%. I have tested.

Contact Form


Email *

Message *