簡單的Blogger Theme教學

文章分類為：學習筆記與心得。

再次說明，這只是初階的教學而已，不含自訂文字背景以及小裝置的設定，可說是基本中的基本，不過應該足夠處理個人化的佈景主題了，因為我也是這樣弄的

在製作前有個很重要的連結一定要去看：版面配置的網頁元素標記。有興趣繼續研究的話可以把這裡的文章都看完。前面這兩個連結都是Google內部的說明檔，是非常入門而且重要的；接下來就是找一些Blogger的樣板網站，找幾個喜歡的版來研究研究嚕。

裝置元素的簡單說明

Blogger說明檔中的小裝置您可以當成一個區塊，依照說明文件中所說的，小裝置的種類現在共有13種，我把幾個我常用的列出來並做簡單的說明：

BlogArchive -- 按照日期分類的文章存檔
Blog -- 內文本體，這個是一定要有的區塊喔
Header -- Blog標題跟Blog說明
HTML -- Html / java的放置區塊
BlogProfile -- 站長介紹頁面，會連到Blogger內建的介紹頁
Navbar -- Blogger上方很多人覺得礙眼的區塊

如果有興趣的話，應該可以找到更多內建的小裝置標籤

接下來就是來做網站的動線規劃，我覺得這個很重要。Blogger大致上可以分做兩部分弄，以動線規劃來說是有比WordPress簡單不少，只要做index頁面跟single頁面這樣就可以，以常見的版型來說就像下圖這樣：

其實在Bloger網頁元素頁面看到的東西也會是這樣
主要的差別在於內文區塊的設定；index的部分有分類標題，single的部分有迴響區塊，而這部分也是最麻煩的部分，不講小裝置設定的話，得花上不少時間處理CSS。

區塊的設定方法

排除小裝置設定來說的話，區塊的設定非常非常簡單，寫法是這樣

<b:section><b:widget/></b:section>

用<b:section>包住<b:widget/>就可以了，就這麼簡單，哈！如果要做小裝置設定的話，<b:widget/>是可以展開成<b:widget></b:widget>的。詳細的屬性設定請移駕到版面配置的網頁元素標記看；簡單來說，標題的區塊可以在配置好div區塊後在適當的位置這樣寫

<b:section id='myheader'><b:widget id='Header1' type='Header' title='我的標題' /></b:section>

就這麼簡單；同理可證，內文、註腳跟側邊欄位也是這樣寫就可以，不過建議側邊欄內的物件要先規劃一下比較好。簡單吧? CSS設定才是地獄的入口哩…

內文區塊的CSS設定

這邊開始講內文區塊，上面有提到要分兩頁面規劃，主要就是差在內文區塊的設定。區塊排列的方式可以參考這個：

我只把簡單的class標註出來而已，詳細的設定我都是實際把樣板on上之後再來抓class標籤做css微調；要注意的是post-header-line只有一條，post-footer-line最多可以到三條；而這樣的順序如果不開小裝置設定的話是沒得改的，所以只能從後台的網頁元素頁來做設定，我的做法是把礙眼的class用display:none關掉 XD"

接下來是index的內文區塊跟single區塊的配置，詳細的class一樣請按滑鼠右鍵自行研究…

最後囉唆的說明一下，可能有不少人被Blogger的css寫法嚇到，其實簡單來說<b:skin>標籤區塊內只放自訂變數的值就可以，這個變數就是後台的「字型和顏色」頁面內的設定，如果不打算設定變數的話就弄個<b:skin><![CDATA[]]></b:skin>這樣的空殼標籤給系統抓，再用外連的CSS做版面設定。詳細的說明可以參考版面配置的字型和顏色標記。

就是這樣，感謝您的收看，如果這篇文章幫上您的忙的話請留個言鼓掌算是給我個激勵；如果有錯誤的話也請高手幫忙指正一下，乾蝦～ m(_ _)m