Home
Blogger

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

9 comments

  1. Thanks Brother.
    • In response to your request I have shared this code.
    • 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.
  2. Nice header.
    your design is nice and clean. good one
  3. Thank You Very Much Bro For This Article See It On My Blog
    Regards,
    Blogger Techniches
  4. Hey Bro Add Related Post With Thumbnails Like Yours Please Reply Must I Want This Urgently Or Send The Code To My Gmail Id : abdulsamadessani5@gmail.com
    • 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--

      http://www.bloggerspice.com/2013/05/exclusive-wide-thumbnail-related-posts.html
  5. Doesn't Work!
    • Please check your Blog header code first. Because different template code use different style. I have used

      #header-inner{

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

      #header-h1{

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

Go Up