Blogger Templates

This is completely outdated, there is a far more efficient technique available just insert

#navbar-iframe{
visibility: hidden;
display: none;
}

Somewhere in your css styling.

By now everyone has probably heard of new Blogger Beta. I personally didn't sign up until someone asked me for Beta assistance. One of his problem is that the usual code (visibility:hidden) used to hide the navigation bar does not work in beta. So,I approached this problem and found out that Blogger Beta linked the nav bar in iframe with external CSS instead of a hude jumbo of javascript and any code you add does no effect the nav bar styling.

So, I took a different approach and decided to block it instead, so here is what I came up with, please do not copy anything in red, they are comments:


1.) Add the following to the css styling

#block{
width:100%;
height:40px;
background-color:rgb(232, 234, 236); change to your own background color
z-index:10000 !important;
position:absolute;
top:0 !important;
left:0 !important;
}

2.) Add the following anywhere in your body tag

<div id="block"></div>

3.) This step is optional and needed to be changed for your own template

#container{ or whatever that wraps around the content
position:absolute;
z-index:20000 !important;
top:5px;
left:110px;
rest of your styling goes here
}

The top and left property may need to be adjusted. Please note, this technique will not center the content in all browser resolutions, I'll come up with a solution shortly(I already have something in mind, just needs to be tested first).

Please credit this hack to me, and for more information and tips & tricks please visit again soon or sign up at Blogcrowds.com.

I want to conclude to say that I came up with this hack merely because someone asked me to solve a problem, I have no problem with the Blogger nav bar, I show the Blogger nav bar in all my blogs and use it quite often :).