2007/06/06

幾秒鐘移除或自動隱藏 blogger頁首的導覽列(navbar) !




Blogger 的頁首預設都會有個 blogger navbar, 可用來搜尋其他blog. 不過, 如果header放了圖片, 再看那條導覽列, 總是覺得有點突兀.



其實只要花幾秒鐘,加幾行程式碼上去, 就可以把那導覽列隱藏起來了.


首先選擇 範本--> 修改 html 就會看到下面這個畫面. 要注意的是, 每次修改之前, 最好先備份一下模板.

備份說明: 按一下 "下載完整模版", 把目前的template 另存到電腦就行了.



備分好了之後, 開始動手吧!

</head>前,加入以下程式碼

<style type='text/css'>
.Navbar {visibility:hidden;display:none;}
</style>


先預覽一下, 確定無誤後,儲存就可以了.

2007/06/19 更新
有朋友問, 如果要自動隱藏navbar, 該怎麼做?
可以用濾鏡的方式..不過目前自動隱藏的效果只適用在Firefox, 在IE下的效果是隱形並非移除, 但滑鼠向右上角上移時, 仍可以點到登入blogger的連結! 有IE的話, 可以試看看~

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

相關文章 :

15 comments:

Zero 提到...

真的好快阿~~
之前我自己找的都沒這麼簡單的說~~
呵呵,又從這裡學到東西啦^_^

Skyvee 提到...

呵, Zero, 客氣了! 我也從你的足跡認識更多精彩部落格呢!

dicky2868 提到...

怎樣可以移滑鼠到上方時又顯示出來呢?

Skyvee 提到...

如果希望是自動隱藏的功能, 可以加入這段程式碼.
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

不過自動隱藏的效果在firefox下才看得見, ie下是變成隱藏的效果. :)

Golden King 提到...

要加到那裡

Skyvee 提到...

Golden King, 在區塊 <head> </head >之間, 加在 body { 前. :)

柳丁媽 提到...

不好意思 我想請教一下
為何我加入程式碼
< style type='text/css' >
.Navbar { visibility:hidden;display:none;}
< /style >

結果卻是整個隱藏起來
我將滑鼠移到右上方他也不會出現呢??

Skyvee 提到...

柳丁媽您好,
如果想要自動隱藏的效果, 是要加入最下面補充的那段程式碼哦!
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

而且, IE, Firefox的效果會不一樣哦!

Kelvin 提到...

請問一下,
我把你給的這段code:
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

放進我的blog裡之後,
在firefox裡的確是自動隱藏,IE中也的確是隱形。但是情況卻變成IE裡有show出banner,可是firefox裡面沒有banner的圖片。我有另外使用你的另一篇文章所提供的code,來加上橫向menubar,請問是不是這兩段code有互相影響到呢?
可否麻煩你幫我檢查看看呢?
我的Blogger: http://killbarn1980.blogspot.com/
非常感謝~

Skyvee 提到...

不過看起來, 你設定的header width 是900, 但圖片是928寬度, 或是你試著調寬度看看? 照理說, banner 跟這兩個功能 似乎是不會衝突到才是..

Kelvin 提到...

剛才已經試過調整width為928了,不過還是不行。我想請問在你那邊用firefox看到的結果,也是沒有show出banner嗎?會不會是Firefox自己的問題呢?

Kelvin 提到...

玩了幾個鐘頭才搞懂,同樣一個url位置,IE可以抓到,Firefox卻不可以。結果把url上的檔名修改之後竟然就可以了,雖然搞不懂怎麼回事,不過問題已經解決了。
自己搞了那麼久,才體會到你的Blog真的處理的很棒,也感謝你的分享,謝謝~

Skyvee 提到...

kelvin, 原來是檔名啊? 比較好奇的是, 之前的檔名是什麼呢?

玩blogger 比較辛苦的是前期階段, 有很多事要自己下去摸索後, 才會印象深刻及認識更多.我也只是把自己摸索的過程, 慢慢記錄下來, 也是從與網友討論之中, 學到更多啊! 您客氣了.

希望聽真心話的傻子 提到...

謝謝

skyvee 提到...

也謝謝你的留言

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.