搜尋此網誌

工商服務

2007年9月10日 星期一

如何隱藏Blogger的NavBar導覽列?

如果你使用的是跟本站相同的Blogger部落格系統,而且又覺得頂端的NavBar導覽列(如下圖所示)有點礙眼的話,那麼你一定很想把它拿掉對吧。



其實只要加一行程式就可以做到了(設定CSS樣式:#navbar {display: none;})。問題是,NavBar導覽列不見之後,那上頭一些登入啦、自訂啦、新文章啦的連結也不見了,部落格管理方面就變得比較麻煩一些。

所以呢,把NavBar導覽列隱藏起來只算做了一半的事情,另外一半的事情則是要提供存取原本那些管理功能的方法(甚至讓它能夠在需要的時候顯示出來)。

提供管理者功能的方法有二:

一、透過在網址上面附加參數

從NavBar導覽列的「自訂」進入Blogger的管理頁面,切換至「範本」的「修改HTML」,然後便可以在「修改範本」看到網頁的原始碼,在<head>與</head>之間,加入下面這段程式碼,然後「儲存範本」:

<style type="text/css">#navbar {display: none;}</style>
<script type="text/javascript">&lt;!--
if (location.search.length == 0 || location.search.indexOf("updated") > -1)
{
document.write("<style type='text/css'>#navbar {display: none;}</style>");
}
else if (location.search.indexOf("login") > -1)
{
window.location = "http://www.blogger.com/";
}
else if (location.search.indexOf("logout") > -1)
{
window.location = "http://www.blogger.com/logout.g";
}
else if (location.search.indexOf("custom") > -1)
{
window.location = "http://www.blogger.com/rearrange?blogID=你的部落格編號";
}
else if (location.search.indexOf("post") > -1)
{
window.location = "http://www.blogger.com/post-create.g?blogID=你的部落格編號";
}
//--&gt;
</script>


注意喔,將<script>和</script>之間的程式碼註解起來是有必要的,可以避免Blogger系統基於格式化等理由去更動到不該更動的地方;至於上面這段Javascript程式的五個if判斷,分別意味著:
  1. 如果連結網址是「http://你的部落格帳號.blogspot.com」或者正透過「較舊/新的文章」在進行瀏覽的話,將可以如願看到不含NavBar導覽列的部落格首頁。
  2. 如果連結網址是「http://你的部落格帳號.blogspot.com/?login」的話,將可以進入「登入」頁面。
  3. 如果連結網址是「http://你的部落格帳號.blogspot.com/?logout」的話,將可以登出部落格。
  4. 如果連結網址是「http://你的部落格帳號.blogspot.com/?custom」的話,將可以進入「修改版面配置」的管理者功能頁面。
  5. 如果連結網址是「http://你的部落格帳號.blogspot.com/?post」的話,將可以進入「建立文章」的張貼頁面。
  6. 如果連結網址是「http://你的部落格帳號.blogspot.com/?其他任意文字(例如xxx)」的話,將可以進入含有原先NavBar導覽列的部落格首頁。
二、在邊欄新增一塊管理者區域

另一方面,你也可以從NavBar導覽列的「自訂」進入Blogger的管理頁面,切換至「範本」的「網頁元素」,然後在適當位置「加入網頁元素」,你可以選擇「連結清單」,「標題」命名為「管理者功能」,然後加入下列四個「新網站URL」與「新網站名稱」組合:
  1. 登入:http://www.blogger.com/。
  2. 登出:http://www.blogger.com/logout.g。
  3. 自訂:http://www.blogger.com/rearrange?blogID=你的部落格編號
  4. 張貼:http://www.blogger.com/post-create.g?blogID=你的部落格編號
如果你只有採用第二種方案,可別忘了要在<head>和</head>之間加入隱藏NavBar導覽列的程式碼:<style type="text/css">#navbar {display: none;}</style>。要是你覺得條列式太佔空間的話,也可以像我一樣在「加入網頁元素」時改選擇「HTML/JavaScript」,以便弄成並列式的模樣:



在拿掉NavBar導覽列之後,整個版面都會往上提升,可以看到更多關於你部落格的內容,或者你想在原本NavBar導覽列的位置擺上Google AdSense的橫幅廣告,似乎也很不賴喔。

【2007.09.16 17:03 加入藍色文字部分】

【2008.01.24 updated 修改程式如紫色部分所示】

至於為何要修改,請參考本站的〈在Blogger加入JavaScript程式碼時的注意事項〉這篇文章;另外我發現原先的程式好像有些邏輯上的錯誤,CSS那段應該預設就要開啟了,免得在某些情況下又會看到NavBar導覽列冒出來(比方說按了邊欄的「分類標籤」進行瀏覽之後),我當初寫這程式的時候真是腦殘呀,XD。

沒有留言:

張貼留言