blogger隐藏导航栏的三种方法

   十二月 04, 2011       MGT@blogger

---

From Evernote:

blogger隐藏导航栏的三种方法 Clipped from: http://7-cafe.com/archives/630007

Blogger.com的NavBar指的是博客页面顶端的那一条导航栏,它提供了搜索,创建,标记,登录,随机到下一个博客的功能.个人觉得这NavBar挺鸡肋的.而且有时候跟主题又不谐调,搞不好别人看你不顺眼还可以举报(标记)你呢!

所以这东西还是"剪掉"比较好,下面介绍三种方法去剪掉它.

————–解1——————–

前几天在写iori and kyo这个plurk自定义css的时候给自己恶补了一下css知识,在研究干掉NavBar的时候就派上用场了,我尝试用了display:none这个语法,嘿嘿,结果一下子就成功了!嘿嘿,掌声鼓励鼓励!以下是代码:

<style> table {display:none;} #b-navbar {display:none !important;} #blog-header {margin-top:-30px;} #wrapper {margin-top:0px !important;} </style>

放在body之后#page之前.由于用css把Navbar隐藏了之后页面的上方会留下一条难看的白条,所以这里还把页面拉高了30px.效果(like this).

————–解2——————–

当然了,干掉NavBar并不只有上面的方法,这次来个超简单的,只需要将下面的这几行代码放在body之后#Page之前(推荐).来自:月光博客.(我小小地修改了一下…)

.Navbar { visibility:hidden; display: none; }

这个更简洁!

————–解3——————–

还记得前一篇文章中用到的阿土伯的js吗?其实如果你用了阿土伯的代码,那你只需要往『后台』>『布局』>『##HIDEME##』里加入这几行代码:

<script> // Blogger NavBar// true = 隱藏 false = 不隱藏 BloggerExtOptions.hide_navbar = true; // Blogger NavBar// true = hover BloggerExtOptions.fade_navbar = true; </script>

保存后就搞定了.

如果你之前没有用阿土伯的Hack,而上面的解1,解2您又不满意,那么Come on,『后台』，在『布局』处选择『添加小工具』，在弹出的窗口中选择『HTML/JavaScript』，在『职务』中填入＂##HIDEME##＂，然后往『内容』里加入以下代码:

<script src="http://blogger-ext2.googlecode.com/files/jquery.pack.js" type="text/javascript"></script> <script src="http://blogger-ext2.googlecode.com/files/blogger_ext2-core-0.6.3.pack.js" type="text/javascript"></script>  <script> // Blogger NavBar// true = 隱藏 false = 不隱藏 BloggerExtOptions.hide_navbar = true; // Blogger NavBar// true = hover BloggerExtOptions.fade_navbar = true; </script> 

点击保存后就搞定啦!

这里需要说明的是阿土伯的方隐藏了NavBar,但并没有完全的干掉,当你把鼠标放到页面上方的时候NavBar又出现啦.这是一种自动隐藏的方法.