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 標籤沒有完整的閉合而無法存檔的問題,遇到這個問題就直接用記事本將檔案打開,全選後複製、貼上編輯區即可存檔。

這個網誌中的熱門文章

Gatsby 廣告中木村拓哉機械舞的背後

Google Doodle : Pacman 小精靈

自架 Android BT / NAS 機:超靜音超省錢超低功耗