Blogger dynamic views - 動態檢視主題模版的設定 ~ 天馬行空

如何修改Google Blogger的官方Dynamic views 動態檢視主題?

把網頁加在主選單列/add Pages to menu bar

首先, 到後台的[版面配置]→[+新增小工具]→[網頁]

然後勾選想要出現在menu上的網頁, 按下[儲存]鍵後, 把它拖曳到[main]的網誌文章的上方, 即可.

成果如下, 順序可在上面的[清單順序]自行調整.

隱藏主題變換的選單

這個主題可以允許讀者自行變換主題呈現的模式. 一共有七種模式, 預設值是你選擇為主題時的版面.

例如, 在更換主題時, 如果選擇的是"雜誌模式"那麼預設值會以"雜誌模式"呈現, 然後訪客可以自行挑選喜歡的模式來瀏覽你的網站.

個人覺得這樣的設計滿酷的, 但也許有些版主不希望讓訪客有過多的選擇, 想要固定一種模式來呈現自己的網站.

那麼, 也很簡單, 只要在後台的[主題]→[自訂]→[進階]→[新增CSS]裡貼入下面的程式碼, 就會阻止訪客自行選押擇觀看模式了.

/* 隱藏7種主題模式 */
#header #views {display: none;}

那麼, 你的網站menu bar將不會讓訪客有選擇用什麼樣的模式來瀏覽你的網站了.

如果你想隱藏的不只是主題顯式的模式, 而是整個menu bar, 那麼, 在[主題]→[自訂]→[進階]→[新增CSS]裡貼入以下程式碼, 就會移除整個menu bar了.

/* 隱藏主題模式選單 */
#header .header-drawer {display: none;}

更改隱藏式側欄的位置/side bar position

預設的隱藏式側欄是在網站的右邊, 如果想改到左邊, 也是可以的, 只要貼入下列CSS程式碼即可.

/* 側欄位置放到左旁 */
#gadget-dock{position: fixed !important;left: 0px !important;}

加一個背景圖案在網站的標題處

/* 標題背景圖 */
.header-bar{background-image:url('圖案網址') !important;}

例如:
.header-bar{background-image:url('http://goo.gl/Xt1G1') !important;}

隱藏搜尋列

在[主題]→[自訂]→[進階]→[新增CSS]裡貼入以下程式碼,

/* Hide search */
.header-bar #search{ display: none !important; }

固定側欄小工具

預設的Dynamic Views主題, 側欄是浮動的, 也就是說, 如果滑鼠移過去, 側欄會出現, 幾移之後會自動隱藏. 如果不想側欄隱藏, 希望一定在那裡, 只需要在[主題]→[自訂]→[進階]→[新增CSS]裡加入下面的CSS程式碼即可.

/* 固定側欄小工具 */
#gadget-dock {position: fixed !important;right: 0px !important;}

下拉式網頁選單

如果想要網頁全部集中在一個下拉式選單裡, 而不是個別出現在menu bar上, 那麼只需要加入下面的CSS程式碼即可.

/* 網頁集合在下拉式選單中 */
#header.header .header-drawer #pages.tabs ul li{margin: 100000px;}

把網站標題放置中央

預設值是在左邊, 如果想要居中,

/* 標題居中 */
#header{text-align: center !important;}

把menu bar的選項放置中央

/* 中央對齊menu bar */
.tabs {width:80% !important;text-align: center !important;}

調整側欄的高度

這裡的數字部份是側欄最上面與網站頂端的距離, 可以自己自行試著更改, 調整個自己喜歡的位置.

/* 側欄高低 */
#gadget-dock, .ss {top: 70px !important;}

移除Blogger換頁下載時的齒輪圖形

/* 移除齒輪 */
.ss,.blogger-gear{display: none;}

加一個menu bar的網頁分隔線

顯示全部文章標題

在timeslide/時間表模式, 如果文章的標題過長, 那麼只會出現文章部份標題, 如果你有好幾篇的標題前面的文字都一樣, 那麼被截斷的部份就顯的隔外的重要.

只要加入下面的CSS程式碼, 就可以讓文章標題完整的呈現囉.

/* 顯示完整文章標題*/
.timeslide #main .title a, .spk{white-space: normal !important;}

如果在sidebar/側欄模式, 文章標題過長, 那麼, 就貼入下面的CSS程式碼, 自行調整數字的部份來符合文章標題的長度.

/* 調整sidebar寛度 */
.sidebar #sidebar{width: 250px !important;}
.sidebar #content{margin-left: 250px;}

過長的文章標題在Flipcard/翻卡模式也會出現長度不足, 文章標題被卡斷的問題, 只需要加入下面的CSS程式碼即可解決這個問題囉.

/* flipcard文章標題高度 */
.overlay .title, .ss{height: 110px !important;max-height: 110px !important;}

顯示snapshot的文章標題

調整文章行間距

在[主題]→[自訂]→[進階]→[新增CSS]裡加入下面的CSS程式碼

.article-content.entry-content {line-height: 2.0}

預覽動態檢視主題模版

在更換成動態檢視前, 可以利用這裡來預覽你的部落格哦.

參考資料: Edit DV, Customize DV, Remove ViewStyle, No DV
http://bloggertipsntrix.blogspot.com/?view=magazine
http://blog.troyastle.com/2012/03/hiding-elements-from-bloggers-dynamic.html
http://www.southernspeakers.net/search/label/Dynamic%20View