Blogger dynamic views - 動態檢視主題模版的設定

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

    0 留言:

    張貼留言