Add a Hover Effect to Blogger Navbar - Blogger Tutorial

Have you ever noticed the blogger navbar at the top of Lovinglife?

You know this UGLY thing?

Have you ever hovered your mouse over that area (on lovinglife) and noticed that it appears and then disappears when you move your mouse away? Ever wanted to do the same thing on your blog?

It only takes a minute. Give it a try.

How to add a hover effect to blogger navbar: A Blogspot Tutorial

1. Go to your design tab in your blogger dashboard.  Click on edit HTML.

2. Scroll down and find

body {

3. Copy and add the following code just above it.

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

4. Save your template.

Viola, you are done! Now view the awesomeness of the hover effect for the blogger navbar.

If you have any questions feel free to leave a comment and I will be happy to answer them. If you apply this to your blog, I would love to see it in action. Leave a comment and post a link to your blog. 

*I don't generally suggest deleting the Blogger navbar because it is useful in Blogger SEO (Search Engine Optimization). Adding the hover effect doesn't do anything to your blogs SEO.