Add Hover Effect on Blogger Header Title text or Logo

Add Hover Effect on Blogger Header Title text or Logo

9
data:blog.title
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
Add Hover Effect on Blogger Header Title text or Logo
4 Stars stars - "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 spi...

Post a Comment

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

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.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *