隐藏Blogspot的Navbar
引言
每个Blogspot发布的Blogger都会在头上顶一个导航条（navbar），它帮助你搜索你的blog内容，也让你能随机访问别人的blog。和某些blog顶着的广告条相比，navbar要有用的多，也不是那么烦人。要隐去这个导航条，对于Beta版和旧版要区别对待。
旧版Blogger
对于旧版Blogger，这里有两种方法可以隐去这个导航条。
一种就是在模版中间加上下面的代码：
还有一个方法就是加上下面的代码：#b-navbar {
height:0px;
visibility:hidden;
display:none
}
如果你想把头上的导航条垫到屁股底下也不是没有可能，试试在模版中间的body标签中添加：#b-navbar { height:0px; visibility:hidden }
body { position: relative; top: -32px; }
虽然blogger给用户提供了很大的自由度，但是我不确定这样随意“斩首Blogger”会不会违反Blogger的服务协定，所以想尝试的朋友后果自负哦。body { position: relative; }
#b-navbar {
position: absolute;
top: inherit;
bottom: 0px;
margin-bottom: 0;
}
当然，那天想重新顶起你的导航条了，只要删除上面提到的代码，它就回来了。
Blogger Beta
上述方法对于最新的(2006年8月15日以后)Blogger Beta，已经失效。新版Blogger可以用如下方法隐藏Navbar：
在模板修改Page Elements那一项，加入一个“HTML/JavaScript” Element，写入代码
<style>#navbar-iframe { height: 0px; visibility: hidden; display: none }</style>
即可去掉navbar。
更进一步的解释
Beta版的Blogger Navbar是由http://beta.blogger.com/css/navbar/classic.css控制它的样式的，代码如下：
html body {margin:0;padding-top:0;padding-left:0;padding-right:0;
}
body #wrapper {margin-top:30px;
}
body #header {margin-top:50px;
}
#leftcontent {_margin-top:30px !important;
}
#rightcontent {margin-top:30px !important;
}
#Main #Title {margin-top:30px !important;
}
body #wrap #wrap2 #header {margin-top:0;
}
body #wrap {margin-top:34px;
}
#blog-header {margin-top:-4px;
}
body #wrap4 {padding:15px 15px 0 15px;margin-top:-4px;
}
#space-for-ie {display:none;_border:0 !important;_display:block;
}
#navbar-iframe {position:absolute;top:0;left:0;z-index:500;>}
所以只要自己当前的模板中有wrapper、header、leftcontent，等等，上面代码中的id就会受到影响。#header更是经常用到的顶部id，如果去掉顶部搜索条后发现顶部还是多出一块影响自己的布局，就是它在作祟了。在自己的css代码区加入
#hearder{ margin-top: 0px !important;}，!important的意思是强制使这个css提高到最优先级，相当于覆盖掉了classic.css中的定义。而且#navbar-iframe是绝对定位，如果你发现顶部搜索条覆盖掉了自己的一些内容，可以在自己的css代码区加入#navbar-iframe { position: relative !important;}把#navbar-iframe变成相对定位，就不会覆盖掉什么内容了。(当然也可以把它去掉)。那么不影响布局去掉navbar的方法应该是这样的，在自己的css代码区加入 #hearder { margin-top:0px !important;}
#navbar-iframe { display:none;}参考链接
2 条评论:
灰常感谢 太棒了
可以用 谢谢分享
发表评论