Blogger template模板教學課程---概說及基本結構

在為何在Blogger架設自己的部落格一文，綸太郎說明為何選擇Blogger建立部落格，而在Blogger成立你的部落格最大的問題就是版面如何編排，功能怎麼啟用，由於原始介面簡單，雖說blogger是Google名下的服務，可結合各種資源，但很多人一聽到語法、html及css，就逃之夭夭，什麼自由度、主權掌握在我手，通通不重要，但如果你還是願意踏入這塊園地，而不懂語法及一些css的朋友，希望這系列的文章能對您有所幫助。

在Blogger經營網站一年多，雖然還有很多不足的地方，但是基本上程式碼大部分還看得懂，除了一些java script等的語法，經常改版也遇到很多版面上修改Css的難題，所以想寫下自己改版的過程，或許初入門的一級生們還是需要比較基本的認識，這是個系列文章，至於申請及後台基本設定，我想很簡單就不必再解說了。

Blogger開放模版程式碼讓網友修改是比其他家的BSP要強得多，大部分只有開放外觀修改，我以Blogger官方提供的模板Thisaway Blue來說明，



首先我們進入Blogger的後台，

在一般模版（template）中主要分兩大主體，
1、CSS，網頁的外觀，譬如字型大小、顏色、型態，外框、圖片設定等
2、HTML，網頁的結構與內容，注重版面編排位置設定，在Blogger的使用裡，是使用XHTML，比HTML更嚴謹且較簡潔也是最新的版本。

整個模板可以分成
‧網頁文件宣告（最上方到＜ｈｅａｄ＞之間）
‧外觀CSS設定及網站文件資訊（ ＜ｈｅａｄ＞到＜／ｈｅａｄ＞）
‧內容結構HTML語法（＜ｂｏｄｙ＞到＜／ｂｏｄｙ＞）
如下圖，

在模版最最上方就是這個網站的文件宣告，告訴瀏覽器你使用的XHTML版本及參考的文件來源。

接下來的head則是文件的標題，說明網站或是文件的相關訊息，有數種標籤可以運用，如title、meta、link，告訴瀏覽器你的網站名稱、文章標題、作者、使用的關鍵字、外部連結等等訊息，另外網址出現的小icon也是在此定義。

如果你是初學者上面這些可以不用去動他，如果想優化網站，做好SEO，這裡是有些小技巧可以運用的。

接著會列出這個模版的設計者的資訊，通常我們瀏覽到某個blogger網站，覺得版型不錯，也可透過檢視頁面原始碼，來得知模版設計者的來源，這部分建議不要刪除，尊重原創者。

/* Variable definitions，這部份就是字型及顏色、大小的設定，如果沒有這部份，那麼版面配置裡的字型與顏色也無法作用，常有人問為什麼我改了字型與顏色，都沒有產生變化，那就是因為該元素沒有定義。

從body{ 到 ＜/head＞ ，這就是CSS外觀設計，這裡就是大家最頭痛的地方，怎樣讓你的版面更美，更賞心悅目，是要經過一次又一次的測試，調整顏色、距離、文字大小，設計特別的圖案顯示，都在這裡完成。

從＜body＞到＜/body＞，則是HTML內容結構設計，讓每個網頁元素的排列組合符合你的要求，比如兩欄變三欄，除了多了邊欄（sidebar）的定義css，在html也是要加上相關的語法才能完成。

以下為初學者常會問的問題，整理如下，
Q&A：如果喜歡一個模版如何套用呢？
請參考Blogger 新手基本技巧問答(一)一文。
Q&A：我想要改變模版的大小？
請參考版面大小的調整一文。
Q&A：我想換標題圖片？
請參考換Banner圖片及文章標題加上圖示
Q&A：我不想全文呈現，想要文章摘要兩三行再進入全文，怎麼做呢？
建議上Google查詢”繼續閱讀”，就會有很多資料，綸太郎是使用羊男的繼續閱讀版本，每篇文章需加入語法，請參考繼續閱讀的設定。
Q&A：沒有最新文章與最新回應，怎麼加上去？
請參考，新增最新文章&最新回應一文
Q&A：我想申請Blogger， 有什麼要注意的事嗎?
請參考，Blogger初入門教學彙集一文

其實如果你不那麼苛求版面設計、而以功能為主的話，以Blogger官方所提供的版面也是夠你利用的，就看看國內有名電腦玩物的部落格，就是使用基礎的版面設計，再配合功能性的修改，還是能擁有上萬戶的訂閱者，所以內容還是王道，但你以為寫的好，就隨便哪一家都行嗎?當然不行，因為在Google Blogger寫的文章，Google一定不會忘記你的，搜尋結果是比其他的Bsp效率成果要好，而要求版面設計者，現在Blogger Templates的資源真的是很多，選擇你喜歡的，再來修修改改，也是能擁有個與眾不同的版面的。
延伸閱讀：
Blogger template模板教學課程---CSS外觀解說
Blogger template模板教學課程---HTML內容架構
blogger模版CSS語法細部介紹(上)
Blogger模版CSS語法細部介紹(下)