How to: Hide the Navbar from you blogger site.
This is a little trick that I learned when I was setting up the Durham Networks blog last week.
I would recommend this for anyone using a custom domain and template to help keep the feel from your site to the blogger site natural. Do no do this if you do not have a custom domain, give blogger some credit for the free blog.
I am not doing this on my blog because I like blogger and the navbar is used to promote other blogs. I did do it on the Durham Networks blog because it is a company blog and I wanted the template to remain the same throughout the site. I also have it setup as a custom domain at blog.durhamnetworks.com.
Now with all the “do not do this” stuff out of the way lets begin.
You will need to have some HTML knowledge in order for you to understand this.
Backup
It is recommended that you backup your template just in case you screw this up and don’t know how to fix it. From the blogger dashboard go to your blogs layout page. Now click [Edit HTML]. Near the top of the page you will see [Download Full Template], click that. It will then start the download for the XML template file. Make sure you save it somewhere safe.
The Code
You now need to put the code in the layout that will hide the navbar. While still on the [Edit HTML] page in the textbox find where it says something like <title>…</title>. Just under that line you will put this code.
<style type=’text/css’>
#navbar {
visibility:hidden;
height:0px;
}
</style>
Hit the [PREVIEW] button just to make sure that it is working then save the changes by clicking [SAVE TEMPLATE]. If you go to the preview and the navbar is still there then try moving the code just before the line </head>.
