Change The Blogger Navbar To Hover Effect / Peek A Boo Effect


| | 20 comments
In an earlier post i covered Removing the blogger navbar completely.This is quiet a popular post as many dont like the navbar, but it can be useful.The navbar has progressed over the years to include extra options such as bookmarking and of course has the quick links into your account.So how about a hover effect navbar ?.Basically the navbar will only appear when you place your cursor over the space were it sits.Take a look at the demo below and place your cursor over the area were the navbar should be.



Removing navbar and setting peek-a-boo effect are not against blogger T.O.S.We set navbar to hover effect in three easy steps.

Have Hover Effect Blogger Navbar



1.Select 'Design' then 'Edit Html' for your blog.

2.Find this piece of code in your blogs html :

]]></b:skin>

3.Add the code below just BEFORE ]]></b:skin>

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


Click save template and that's it check out your blog with its new hover navbar.

Just remove the code to set the navbar back to standard or to see how to remove it completely - Remove Blogger Navbar

If You Have Any Questions Drop A Comment Below !
If You Enjoyed This Post Please Take 5 Seconds To Share It.

Stay Connected With Free Updates

Subscribe via Email

20 comments:

  1. Did this too,is way to cool to use the navbar and also not see it ! U rock !!! Ty !!
    ReplyDelete
  2. Wow this is so cool thanks.
    ReplyDelete
  3. ...Hello, is the navbar supposed to drop down when you place your cursor at the top of the page? I followed the instructions but nothing appears but when I place my cursor at the far top left of the page the typed word 'blogger' appears and it is clickable. Is this right? Please advise.

    ...Thank you so much! :o)
    ReplyDelete
  4. reall cool.. i like it.........
    ReplyDelete
  5. Thanks man, beats putting the nav bar at the bottom of the blog.
    ReplyDelete
  6. Added this one too. Gosh, I edited my blog so much today. I think this is my 6-7th edit now.......
    ReplyDelete
  7. thanks for this tip i used it on my blog :D
    ReplyDelete
  8. thanks so much to you for the effort to hide for a while the Navbar.
    ReplyDelete
  9. Hello, am back, I tried this but I don't know what went wrong coz it's not working :(
    ReplyDelete
  10. you re the best.

    too many sites with tips and too meny steps.....
    and the most of them dont work....

    i have already used 13 tips and gadgets from you.

    i i have 100% success .... and only 1 minute to do it.

    you are the best.....
    ReplyDelete
  11. thank you for this tips. you are the best
    ReplyDelete
  12. Great Tip!! I love it, works perfectly.
    ReplyDelete
  13. Thank you for all the great tips and resources, I've been adding your tips and resources for over a year now. Thanks again, Scotty
    ReplyDelete
  14. Thanks. This thing is great. =)
    ReplyDelete
  15. @tj: Well tj you might be using this with IE. It works fine with Chrome. Wonderful site. Well I'm too late to add such things to my blog. But still, better late than never.
    ReplyDelete

Asking a question ? Make sure to click the subscribe by email link below the comment form to get notified of replies !