2010年3月13日 星期六

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

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

bloggerdraft-01 (by 異塵行者)

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

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

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

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

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

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

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

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

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

bloggerdraft-18 (by 異塵行者)bloggerdraft-19 (by 異塵行者)

  • 進入範本修改工具:

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

bloggerdraft-03 (by 異塵行者)bloggerdraft-02 (by 異塵行者)

  • 替換基礎範本:

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

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

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

bloggerdraft-04 (by 異塵行者)

  • 替換背景圖片:

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

bloggerdraft-05 (by 異塵行者)

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

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

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

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

bloggerdraft-06 (by 異塵行者)

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

bloggerdraft-07 (by 異塵行者)

bloggerdraft-16 (by 異塵行者)

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

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

bloggerdraft-08 (by 異塵行者)

  • 微調內容格式:

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

bloggerdraft-10 (by 異塵行者)

  • 其它:

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

bloggerdraft-09 (by 異塵行者)bloggerdraft-11 (by 異塵行者)

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

bloggerdraft-12 (by 異塵行者)

  • 小結:

bloggerdraft-20 (by 異塵行者)bloggerdraft-21 (by 異塵行者)

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

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



"

0 意見:

張貼留言