3 Columns & Multi-Columns Tamplates for Blogger.com Beta

對於許多想要嘗試 Blogger.com Beta 的使用者而言，最常問的問題大概就是「我要怎麼改成三欄式？」之類的問題，因為一旦要修改，就勢必要進入 Edit HTML 的頁面跟 Blogger.com 的語法奮戰(Blogger 的自創語法算是框架式語言嗎？），雖然很簡單，仔細閱讀 Help 就可以開始惡搞，但是認真想要去修改的人並不多，也有很多是看到 HTML、CSS 就先放棄的，既然「懶人包」這麼受到歡迎，這次就乾脆釋出之前我製作的幾個 Layout 版本，做成懶人包給大家套用，也可以讓其他人稍微看看 Blogger.com 在樣版與使用上的自由度。

不過這些樣版只供新版的 Blogger.com Beta （3.0）使用，如果你還沒有升級成 Beta 的使用者，抓這些是沒用的；如果你是已經升級 Blogger.com Beta （用 Google Account 登入的使用者）的會員，只要下載各個 Template 的 XML 檔案回去，登入 Blogger.com Beta 後從控制頁面進入 Edit HTML 頁面，先下載一份原本正在使用的 Template 做備份，再將想要套用的 XML 檔案上傳上去，就可以直接套用這些版型；如果覺得不喜歡、不知道怎麼改，只要將原本備份的 Template 重新上傳覆蓋即可，或是直接挑選新的範本也行，修改樣版是不會動到你所寫的文章的，這點請放心。

我是拿其中我覺得最好看的 Denim 樣版來改的（ Denim 這個 Template 原設計者是 Darren Delaye），增修了部分的 CSS 與修改大部分的區段，製作了最常詢問的 3 Columns 三欄式版面，也同時製作了最近在 Wordpress 或 MoveType 中很多人喜愛使用的 1+2 Columns（上一欄下二欄）、1+3 Columns、2+2 Columns、2+3 Columns 等等 Layouts 供想要使用的網友下載。基於以往的經驗，我必須將 Notice 寫在前頭：

Notice

1.如果你的 Blog 剛申請，且尚未手動增加任何的網頁元素（Page Elements），恭喜你，你可以直接套用這些面版無虞。

2.如果你已經開始使用你的 Blog 了，直接套用這些面版將會失去你所有手動新增的網頁元素（Page Elements），不過完全不會影響你所發佈的文章（Posts）、草稿（Drafts）。

3.如果你已經有手動新增的網頁元素（Page Elements）或是曾經修改過你的 Template，請先備份一份；當你上傳這邊的檔案並儲存時，系統會提示你將會有些網頁元素被刪除，要套用版型的話請「確認」。

4.網頁元素（Page Elements）要重新建置相當容易，就算全部刪除也無損你原本在 Blog 中創作的內容，是否要套用版型來重新設計你的 Blog ，請自行斟酌，恕不負責。

5.所有種類的樣版都分成「一般版」與「No Claim」兩個版本，差別只在於「一般版」在網頁最底下多一行文字：template hacks by: [ METAMUSE ]

6.我尊重使用者「不要」的權力，如果你覺得宣告文字很礙眼，可以直接下載「No Claim」的版本回去使用，如果你覺得樣版不錯，想推薦給別人使用，歡迎使用「一般版」，就算你是使用「一般版」，也可以之後自行手動刪除此行文字，或是在同樣的位置放上你自己的宣告文字。

7.救援：沒有！！改爛了就是重新上傳你的備份，或是重新挑一個範本即可。

在這邊還要附註一下，因為設計這些 Templates 會在欄位內放幾個假的網頁元素來撐欄位，上傳後可能也會遇到系統提示要刪除的訊息，因為是假的，就請確認後強制套用即可，看完 Notice 了，就挑自己的喜歡的吧！

1-above-2-under

Download Tamplate XML file：[ Normal version] [ No Claim version ]
說明：上一下二的樣版非常適合做圖片展示用，喜愛發佈短文的話也很好，下方欄位比較大，也可以放置較寬的訊息（例如 Flickr 圖片組），發佈文章宜採用一頁一篇的方式。

1-above-3-under

Download Tamplate XML file：[ Normal version ] [ No Claim version ]
說明：上一下三是不少寫長篇文章的網友愛用的方式，一進網頁就看到整篇文章，下方欄位提供資訊也很多，不過同樣是比較適合一次只顯示單篇文章。

2-above-2-under

Download Tamplate XML file：[ Normal version ] [ No Claim version ]
說明：二上二下基本上就有點像是新聞聯播網站，上方左側是文章內容，右側是自己 blog 的相關資訊與連結，下方則多是外部資訊或外部連結等。

2-above-3-under

Download Tamplate XML file：[ Normal version ] [ No Claim version ]
說明：上二下三基本上與前者差異不大，只是在下方多了一個欄位，可以放置更多的零散資訊，曾經看過有網友的 Blog 塞很多東西在下方欄位，似乎看起來也不錯。

3 Columns

Download Tamplate XML file：[ Normal version ] [ No Claim version ]
說明：三欄式就傳統來說是入口網站的形式，可是很多網友就是把自己的 Blog 當成是入口網站，所以用三欄也無妨；使用這個樣版首先要注意的是本文如果要放置圖片，請勿太大，使用 Blogger.com 上傳圖片時尺寸大小請選擇「中」（Medium），不然會撐破，左右兩欄寬度 140px ，剛好可以包下 120px 寬的 Google ADSense（應該啦！我沒試...），中間450px 也可以放寬欄位的廣告，就自行運用唄～

樣版所具有的小特色：
1.在所有上下相對的多欄位樣版中，上方 Title 與下方的區塊顏色、文字顏色可以連動調整，使用者只要進到「字型與顏色」的頁面去修改看看就可以知道。（附註範例）
2.所有的欄位都可以新增網頁元素、進行拖曳、從別的欄位拉放網頁元素，端看使用者自行發揮運用。
3.供下載的樣版我已經在 Firefox 2.0 與 IE7 當中預覽過，沒有任何問題，舊版我就不知道了...（這也叫特色？踢！）
4.選單欄位（Sidebar Menu）已做相容處理，使用者右方欄位拖拉網頁元素到下方欄位當中後，標題、內容、文字大小都有相對應的 CSS 設定。
5.欄位設定全採用 CSS Tableless 設計，沒有用到 Table tag，網頁潔癖者與基本教義派應該可以放心使用而不會得憂鬱症吧？

全部解決的。基礎工程已經是出來了，接下來裝潢布置就看個人了；也希望 Blogger.com 能有更多人加入與使用。囧rz 累～
這篇文章將會修改之後轉至 Blogger.com Tutorials，不過這邊應該依然會處在長時間沒啥東西的狀態，因為我實在缺乏寫教學文件的耐心！XD

附註範例：顏色連動調整改上的顏色，下面就會跟著改，像這樣：


update： 現在發現到一個小 bug ，如果你在上傳的時候所選的語系有不一樣（我預設為 UTF-8 ），或是你所增加的 Page Elements 實在不少，就會發現系統回覆你有 XML 標籤沒有完整的閉合而無法存檔的問題，遇到這個問題就直接用記事本將檔案打開，全選後複製、貼上編輯區即可存檔。