Every blog hosted on blogspot.com sub-domain or on a self-domain, has a top navigation bar. This navigation bar allows to search the blog, flag the blog, that is to notify blogger about the objectionable content on the blog, to go to a random blog by using ‘next blog’ link, and to sign in to your blogger account and visit your blogger dashboard.
However, most of the bloggers feel the top navigation bar useless and want to get rid of it. Some of the institution blogs may also want to remove the top navigation bar so that their students may not got to some unsuitable blog by using the “next blog” link. Whatever the need may be, but there is a large section of bloggers wanting to get rid of that top navigation bar and in this post, I will sow you how to get it done.
Hiding ‘navigation bar’ in classic blogger template:
1. Login to Blogger
2. Click on layout link.
3. Click on ‘Edit HTML’ tab.
4. Search for the following line of code:
</style>
5. Add following line of code before </style> :
#navbar-iframe { display: none; }
This will hide your navigation bar. The Blogger Classic Template uses iframe to load the Navigation Bar, and styles it with ID named ‘navbar-iframe’. The name actually also works for new Blogger Widget Template too.
6. After remove navigation bar, there tends to be gap which may be of red, white or any other color depending on your blog background. To remove this gap, find following code:
body {
Add the following line of code after body {
position: relative; top: -32px;
7. Click on “Save Template Changes” when done.
Hiding ‘navigation bar’ in Blogger Widget template:
1. Sign in to blogger.
2. Click on “layout” link.
3. Click on “Edit HTML” tab.
4. Search for the following line of code:
]]>
5. Before the code place the following line:
#navbar { display: none; }
or
#navbar-iframe { display: none !important; }
6. Click on “Save Template Changes” button when done.
Hiding ‘navigation bar’ in blogger blogs published via FTP or SFTP:
1. Login to blogger.
2. Click on “Layout” link.
3. The “Edit HTML” tab will be loaded automatically. . Click on the drop down box beside “Change the Blogger NavBar” and select “off”.
4. Click on “Save Template Changes” when done.
So, what you think?
Did you like this post or you feel it wasn’t that good? Express your mind to me by leaving a comment.
Liked my ravings ?
Subscribe to my tech-ravings.
Subscribe to TechRavings
| Full RSS Feed | |
 |
{ 6 comments… read them below or add one }
nice trick…how to increase the width of the sides???
awesome
i have done that in my blog
@R_Gupta – thanks for your feedback. I do hope that you like my blog.
@SABA – I would definetly get you that. Check my blog for coming posts.
I saw your other blog as well
on both of blogs you have sponsers
howdid you get them??
please i also want sponsers for my blog.
Nifty little trick. I’ve been looking for a way of hiding that ghastly nav bar for quite a while.
If you use blogger get rid of the top navbar blogger puts on your blog http://tr.im/h3rm
More from author