Google Blogger 平台推出超貼心範本設計工具，實作改版心得

昨天的一篇Google官方新聞：「Express yourself with the Blogger Template Designer」，可以說讓大多數Blogger用戶都興奮不已（例如：驚為天人的Blogger templates官方模版終於測試推出）。Blogger，目前是Google旗下的部落格平台，也是電腦玩物部落格所使用的部落格平台。這個平台最大的優點就是簡單、好用、穩定之餘，還有強大的自訂性，而且空間流量等服務完全免費。

不過Google Blogger強大的自訂性，也可能讓一些不熟悉網頁設計的用戶卻步。還好，Blogger注意到了這樣的問題，並持續朝著讓一般用戶更容易上手的方向改進，這次推出的「Template Designer（範本設計工具）」就是這樣一個讓我們這些非技術用戶痛哭流涕的好功能！

因為從現在開始，Blogger用戶可以在完全不打一個程式碼的情況下，改變部落格佈景設計、規劃雙欄三欄變化、調整欄位寬度、改變內容格式，如果再加上不久前推出的繼續閱讀、分頁網頁，還有原本就很好操作的網頁元素搬移功能，現在Blogger的強大自訂性已經建基在人性化的調整工具上，而非一定要用戶自己改動版面程式碼了。

• Blogger：http://www.blogger.com/home
• Blogger in Draft 測試區：http://draft.blogger.com/home
• 部落格改造相關文章：
• Blogger Favicon 如何讓部落格有瀏覽器書籤和網址列專屬圖示？
• [雜言]慢半拍的電腦玩物加速記 (謎之音:終於~嘆!)
• 電腦玩物那些原創內容外，我所抄襲的 Blogger Hack 技巧摘錄
• Google Analytics 各種流量統計數據對部落格有什麼意義？

 

目前「Template Designer（範本設計工具）」必 需進入「Blogger in Draft 」才能使用。或許很多用戶會希望等這個功能測試穩定後才使用，不過當我昨天看到這個消息時，馬上興起了一股一定要試試看的決心XD 於是趁著夜深人靜，清晨五點半部落格訪客最少的時段，我進入了電腦玩物的部落格後台，親身體驗看看這款範本設計工具。

結果就是目前大家在這裡所看到的樣子，要改變範本，當然很多之前做的特殊修改必須重弄，倒是側邊欄元件在版面大改的過程中保留的很好。這樣一輪改變下來，僅僅花了我兩個半小時的時間，這中間還包含了舉棋不定要選擇哪種設計風格較好看的猶豫時間，而就結論來說，我覺得這次Blogger所推出的「Template Designer（範本設計工具）」確實非常好用（這個好用有兩層意義，第一是功能強大而好用，第二是無痛上手的好用）。

如果你是在Blogger新創一個部落格，利用範本設計工具來製作自己的版型，因為少掉了舊版修改所需的重新調整時間，相信大概不用30分鐘就可以搞定一個全新而漂亮的部落格版面。

 

下面，我就來介紹一下這次實作電腦玩物大改版的流程，並帶出「Template Designer（範本設計工具）」的相關功能。

 

• 修改版面前記得先備份：

要改動部落格版面是比較有風險的動作，所以請記得先到〔版面配置〕的「修改HTML」中，選擇「下載完整檔案」，將你的模版範本備份下載，如果修改出問題，只要回到這裡上傳回復即可。基本上我自己的習慣是每個重要修改動作的前後都各備份一次。

 

• 進入範本修改工具：

先進入「Blogger in Draft」測試區，點選〔版面配置〕，然後進入最後一項功能「範本設計工具」。

 

• 替換基礎範本：

如果你是Blogger的舊用戶，那麼你的部落格可能經過修改，裝過非官方的模版，這時候你的版面會無法使用範本設計工具裡的大多數功能。

而我這次既然要利用Blogger範本設計工具好好改造一下電腦玩物，所以我就狠下心替換了這裡的預設範本，當然，這樣的替換會導致你之前一些自訂修改功能失效，必須重新設定，但是側邊欄元件等則可以保留下來。

這裡提供的基礎範本，主要是一些部落格版面的大方向規劃，選擇一款你喜歡的之後，重點是後面我們可以利用各種工具來進行微調。

 

• 替換背景圖片：

首先我們可以替換版面的背景圖片，這裡有非常多各種主題的高解析度圖片讓你隨意使用，只要點選取代即可。

 

• 手動版面配置原來這麼容易！

Blogger範本設計工具最讓我喜愛的就是它貼心又細心的「版面配置」功能。原本我們想要把部落格從雙欄變三欄，或者一欄中有單欄有雙欄，還是說想要調整各種欄位的位置、寬度，對於不熟悉網頁程式碼如我的人來說，都不是一件簡單的事情。

但是如果直接替換別人設計好的欄位，又總覺得有哪些小地方不能盡如人意，而現在Blogger範本設計工具將這些動作變得很簡單，讓你可以輕鬆調整版面配置的各種小細節！

進入「版面配置」，我們可以先從預設8種配置方法中，選擇一個自己想要的規劃模式。規劃好欄位後，欄位裡的元素可以隨意移動位置。

接著進入「頁尾版面配置」，可以讓我們決定整個部落格最下方頁面的呈現欄位，如果你想要在部落格尾端擺上一些資料，那麼設計成雙欄或三欄會讓呈現效果更好。

而最棒的是，我們可以在「調整寬度」裡面，利用「拉桿」直接調整全頁面、單獨欄位的寬度，而且下方還可以立刻看到修改後的結果！

透過人性化的欄位規劃、位置調整、寬度修改選項，我們可以在不到三分鐘的時間裡，快速製造出一個自己滿意的網頁格局。而且從我上面的操作流程裡，確實一個程式碼都不需要用到。

 

• 微調內容格式：

在範本設計工具中的「進階」項目裡，是原本就有的修改字型、顏色等功能，不過這邊提供的選項更多一點，設定上也是能夠立即預覽結果。

 

• 其它：

另外，有鑑於規劃網頁時，你可能會想要知道別人網頁設計的寬度配置？顏色配置？以做為自己的參考。這時候可以利用「Picpick（PicPick 1.8 螢幕擷圖、修圖免費中文工具，教學圖片製作心得分享）」裡的尺規功能、色彩選擇器來輔助你完成目的。

 

當全部修改完成後，要到右上方按下〔套用至網誌〕，你的改變就會立刻生效。當然，如果玩一玩覺得不滿意，可以選擇「返回Blogger」，那麼你的部落格就還是原本的樣子。

 

• 小結：

這篇文章除了介紹Blogger最新推出的「範本設計工具」外，當然也是公告大家關於電腦玩物版面更新的消息，並且邀請大家進入電腦玩物，幫忙測試看看目前的版面是否穩定，有沒有什麼問題？如果發現任何問題，歡迎於本文留言告知。

我自己目前發現的問題是，在老舊的IE 6瀏覽器上，一些版面元素會顯示不出來，但還是可以正常瀏覽電腦玩物內容。另外最後順便註記一個資料，目前電腦玩物近一個月的訪問量裡，40.51%使用Firefox瀏覽器，36.36%使用IE瀏覽器，而也有18.50%使用Google Chrome瀏覽器。