Element XD lab
哥教的不是CG,是偷雞
快速導引

【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;
}





講完了。

技術提供:Blogger.

聯絡


聯絡表單

名稱

以電子郵件傳送

訊息

© thephilko.com All Rights Reserved