Thursday, October 2, 2014

How to Add Mouse Hover Effect on Blogger Navbar

In previous post I had shown how to remove Blogger navbar by CSS and earlier that I had published another post on how to hide Blogger navbar manually. These two posts shows you the process of the removal of Blogger Navbar. I think removing Blogger Navbar can't be the final solution. Because beside having some disadvantages the Blogger Navbar has some advantages too. That is why today I am gonna sharing an interesting trick by which you can keep your Blogger Navbar on without having problem with your blog design.

In the above mentioned two posts I had mentioned one problem with the Blogger Navbar. The problem is, it occupy an space at the top of the blog header. It does not suite with your blog design and many blogger don't like it. But because of its advantages they don't want to remove it and have to compromise with their blog design.

But if you add mouse hover effect on your Blogger Navbar then use the Blogger Navbar in your blog without compromising with your blog design. And you can add this mouse hover effect using a simple CSS code. As a result of the effect the Navbar will be hidden but when you hover around the Navbar area then it will appear. Let's have a look at the below demo...

Mouse Hover Effect on Blogger Navbar

Adding Hover Effect on Blogger Navbar:

Note: Before adding the mouse hover effect on your Blogger Navbar, you need to make sure that you have added Navbar in your blog and it is on. For further help you can Read This Post.

  • First Sign into your Blogger account and go to Dashboard.
  • Then click on Template and then click on Edit HTML button. You will land on the HTML page.
    edit blogger template
  • Here in the HTML page find  ]]></b:skin>  and Paste the following code just Above it.



  • Now click on Save Template button to apply it.

That's it. Now view your blog and hover your PC mouse pointer on the Navbar area and you will see that the Navbar is appearing.


Stay with www.iTTimebd.com for more IT related Post

No comments:

Post a Comment