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

Posted : Thursday, October 08, 2009
Post Author : Paul Francis

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

Step 1. – In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.

Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.

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

Just remove the code to set the navbar back to standard or to see how to remove it completely.Check out some more Blogger Navbar Effects.

If You Have Any Questions Drop A Comment Below !

Author – Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.

26 comments:

Ana M. CiolacuJanuary 7, 2011 at 4:55 PM

Did this too,is way to cool to use the navbar and also not see it ! U rock !!! Ty !!

ReplyDelete
Jorge RamilMarch 8, 2011 at 9:46 AM

thanks.

ReplyDelete
AnonymousMay 11, 2011 at 4:52 PM

Wow this is so cool thanks.

ReplyDelete
tjMay 29, 2011 at 8:43 PM

…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
Prayag VermaJune 8, 2011 at 4:42 PM

thanks a lot

ReplyDelete
SELLAKUMARJune 15, 2011 at 1:59 PM

reall cool.. i like it………

ReplyDelete
The Project SupermanJune 15, 2011 at 4:25 PM

Thanks man, beats putting the nav bar at the bottom of the blog.

ReplyDelete
SamiulJune 17, 2011 at 8:23 PM

Added this one too. Gosh, I edited my blog so much today. I think this is my 6-7th edit now…….

ReplyDelete
mimoAugust 2, 2011 at 1:34 PM

thanks for this tip i used it on my blog 😀

ReplyDelete
JoeAugust 16, 2011 at 7:14 PM

thanks so much to you for the effort to hide for a while the Navbar.

ReplyDelete
JoeAugust 16, 2011 at 7:31 PM

Hello, am back, I tried this but I don’t know what went wrong coz it’s not working 🙁

ReplyDelete
El hombre soloAugust 24, 2011 at 8:27 PM

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
jayfolksSeptember 16, 2011 at 6:38 AM

thank you for this tips. you are the best

ReplyDelete
Christian DroidSeptember 24, 2011 at 12:13 AM

Great Tip!! I love it, works perfectly.

ReplyDelete
Ma. Salvacion BausingOctober 12, 2011 at 4:08 AM

thank you fr this tips:)))))

ReplyDelete
ScottyOctober 28, 2011 at 11:23 PM

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
Lady DonovanNovember 28, 2011 at 5:26 AM

Thanks. This thing is great. =)

ReplyDelete
Riska MirzalinaNovember 29, 2011 at 3:27 AM

LOVEEEEE ITTT!

ReplyDelete
SkynotmeDecember 10, 2011 at 1:38 AM

Awesome! I love this!

ReplyDelete
Qs RealmJanuary 29, 2012 at 12:24 PM

@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
nanMarch 28, 2012 at 4:38 AM

This is the BEST, Thanks! I keep telling myself I’ll learn web design…but until then….you are so so so much help! 🙂

ReplyDelete
Shrey RaviApril 15, 2012 at 7:41 PM

Cool, I just changed my normal nav bar in a hovering one. Thanks 🙂

ReplyDelete
EmileeApril 30, 2012 at 6:53 PM

Good Job with this post. I found another site that has this code but had put their “label” on it. Personally I do not find that in good taste. So, with that said, because you did not feel the need to personalize every code you offer I will tag you on my Blog! Feel free to check it out: Iowa DIY Girl

ReplyDelete
AnonymousJanuary 13, 2013 at 5:52 PM

this is the first time i saw about hover effect for navbar. hover effect will cooler.

Oh, and thanks about tips – how to move navbar too. I will try both of these tips.

ReplyDelete
Sophia LinOctober 10, 2013 at 2:41 AM

Thanks so much! 😀

~Sophia @ Bookwyrming Thoughts

ReplyDelete
CatharinaMarch 15, 2014 at 4:54 PM

Thanks so much! I LOVE, LOVE, LOVE the navbar hover effect. I don’t like seeing it on my blog all the time, but I like to have it there when I need it! At first, I had trouble with the above code, but it wasn’t the code. It was me. I had turned off the Navbar in the template some time ago and just forgot to turn it back on. After turning it back on and adding the simple “navbar hover” code as you show above, it works!

Thanks so much, Paul!

ReplyDelete