佳新的部落格: 如何隱藏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判斷，分別意味著：

~~如果連結網址是「http://你的部落格帳號.blogspot.com」或者正透過「較舊/新的文章」在進行瀏覽的話，將可以如願看到不含NavBar導覽列的部落格首頁。~~
如果連結網址是「http://你的部落格帳號.blogspot.com/?login」的話，將可以進入「登入」頁面。
如果連結網址是「http://你的部落格帳號.blogspot.com/?logout」的話，將可以登出部落格。
如果連結網址是「http://你的部落格帳號.blogspot.com/?custom」的話，將可以進入「修改版面配置」的管理者功能頁面。
如果連結網址是「http://你的部落格帳號.blogspot.com/?post」的話，將可以進入「建立文章」的張貼頁面。
如果連結網址是「http://你的部落格帳號.blogspot.com/?其他任意文字（例如xxx）」的話，將可以進入含有原先NavBar導覽列的部落格首頁。

二、在邊欄新增一塊管理者區域

另一方面，你也可以從NavBar導覽列的「自訂」進入Blogger的管理頁面，切換至「範本」的「網頁元素」，然後在適當位置「加入網頁元素」，你可以選擇「連結清單」，「標題」命名為「管理者功能」，然後加入下列四個「新網站URL」與「新網站名稱」組合：

登入：http://www.blogger.com/。
登出：http://www.blogger.com/logout.g。
自訂：http://www.blogger.com/rearrange?blogID=你的部落格編號。
張貼：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。