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
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.
Nice header.
your design is nice and clean. good one
Thank You Very Much Bro For This Article See It On My Blog
Regards,
Blogger Techniches
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
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.