Navbar is Blogger's menu-bar which appears by default on top of every Blogger blog. If you were to ask me, I prefer removing the Navbar because it's very unprofessional and not of any use. But if you were to ask my friend +Jatan Mehta, he prefers keeping it as it helps him to access Blogger without any extra clicks. Which kinda guy are you?
Actually, it doesn't really matter whether you want the Navbar to appear or not. Why you ask? Because I've got solutions for both!
In this post, we'll have fun tweaking with Blogger's Navbar in every way possible! Let's dive in...
How to remove the Navbar:
1. Go to your blogger dashboard >> Layout.
2. On the top-right of your blog's layout, you will see "Navbar" and an Edit button below it:
3. Click on the Edit button. Something like this will show up:
4. The rest is simple. If you want the navbar to appear on your blog, choose from the various types of navbars available (I like the Transparent Light one).
If you don't want the navbar to appear, choose Off and hit Save.
The navbar's code is in JavaScript and hence, it reduces your blog's page speed! I highly recommend that if you have removed the navbar form your blog, you also remove it's code!
Also, you must have noticed that the navbar is indeed gone, but the space that the navbar took still exists! Removing the navbar's code will solve that problem as well!
The navbar's code is in JavaScript and hence, it reduces your blog's page speed! I highly recommend that if you have removed the navbar form your blog, you also remove it's code!
Also, you must have noticed that the navbar is indeed gone, but the space that the navbar took still exists! Removing the navbar's code will solve that problem as well!
Let me tell you one thing - 99.5% of your visitors are NOT going to use the Nabar. It will simply be a distraction for them. However, if you still want the navbar to appear, I prefer you do the following:
How to add hover effect to Navbar:
Basically, by adding the following CSS code, the navbar will only appear when you move your cursor over the space were it sits. See a demo here. Simply move the mouse at the top of the page and the navbar will appear. At other times, the navbar will be invisible!
In this way, your readers won't be distracted as the navbar won't be visible. It will only appear if you, or anybody else, hovers at the top.
1. Go to your blogger dashboard >> Template >> Edit HTML.
2. Find the following code:
4. Hit Save template and you're done!
I taught you every possible to tweak Blogger's Navbar. Hope you enjoyed having fun with it. ;)
In this way, your readers won't be distracted as the navbar won't be visible. It will only appear if you, or anybody else, hovers at the top.
1. Go to your blogger dashboard >> Template >> Edit HTML.
2. Find the following code:
]]></b:skin>3. Copy the below code, and paste it directly above/before ]]></b:skin>
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
Code Credits: SUYB
4. Hit Save template and you're done!
I taught you every possible to tweak Blogger's Navbar. Hope you enjoyed having fun with it. ;)
0 comments:
Post a Comment