【Blogger】改造動態檢視的選單

Blogger官方提供數十種預設範本，扣除顏色底圖等裝飾變化之後，怎麼看都像是只有一種版型，很部落格。

不過其中的動態檢視是近年推出的一種令人眼睛一亮的範本，搭配不同主題可以選擇七種不同版型，載入速度快，動態效果簡潔，不喜歡還隨時可以改回來，我覺得只有兩個小缺點：

1.有一排動態檢視的選單在那邊佔位置無法關閉（讓讀者選擇檢視方法反而是個困擾）

2.不能自由安裝小工具（側邊欄位通常會消失，文章底部分享按鈕版型會跑掉）

今天先來解決第1個問題，教學來自這個神秘的地方，非常巧妙簡單，利用幾行CSS就搞定，然後進一步修改預設的灰階配色，請繼續往下看。

動態檢視的選單樣式有兩種，沒有自定網頁的情況時，就是一橫排的選單，包含七種檢視選擇

有自定網頁時，動態檢視選單會縮到左邊佔一個下拉式選單的位置

我們以第二種（也就是上圖）為範例，建立自訂網頁或網址，然後清除掉左邊動態檢視的選單。

首先依照官方說明，套用動態檢視

接著建立幾個網頁選單，將網頁顯示為側連結

到後台這裡（設定＼範本＼自訂＼進階＼新增CSS）加入以下幾行，然後按右上角『套用至網誌』

#header #views {
display: none;
}

#header #pages:before {
border-left: 0px;
}

#header #pages {
margin-left: 14px;
}

然後就變成這樣了，只剩網頁選單

接著進一步修改顏色


搜尋Header Bar
修改下方反白處色碼，此為#ff9233橘色

搜尋menu.text.color
修改下方反白處色碼，此為#333333深灰色

成果如下

範例網址在此




如果沒有網頁選單，只是單純想隱藏一整排的動態檢視選單，就在新增CSS的地方改用這一段
#header .header-drawer {
display: none;
}

講完了。