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瀏覽器。

 

 

留言

  1. Blogger 在部落格熱潮退燒後才紛紛推出好用的新功能。
    Blogger 已有聲明此工具不支援IE6。

    回覆刪除
  2. 這個好,多屑詳細介紹與分享。

    回覆刪除
  3. 請問改好以後,頁尾會出現"範本由 Tina Chen 提供. 由 Blogger 技術提供."的字樣,要如何移除呢?謝謝您!

    回覆刪除
  4. 這個因為版面設計也是有版權的,
    我不確定移除了是否會造成使用上的侵權喔^^
    建議還是保留~

    回覆刪除
  5. 謝謝!已解決,設定頁面中有移除的按鈕。真的是太貼心了。板大也是這麼快就回文,真開心!

    回覆刪除
  6. 異塵大,這個寬度的比例可以變動嗎?突然覺得字都擠在一起了,我的瀏覽器視窗是1280x1024左右的大小,兩側都有不少的空白空間,不過右邊的分類字體,能不能小一些些,變的很大,不過現在這個版面區域很明顯,請繼續努力加油 ^.^

    回覆刪除
  7. 注意到博主最近几天的RSS输出好象没有再带广告了,效果比以前好很多了,不知道是不是博主自己给调整的,希望能够一直保持;另外,这个张贴意见的文本框的宽度感觉有点窄,不知道能不能再加宽点,使用起来会更加方便些,谢谢!

    回覆刪除
  8. 好乾淨利落的版面啊!異塵大終於讓張貼意見的框框直接掛在文章下面了…這樣要留言比較方便哪…

    回覆刪除
  9. 右邊分類字體是自動放大的,依據每個主題分類的內容數量,篇數愈多的字體就會放大,這是類似雲狀標籤的功能。

    至於內文字體的部份,會訂在這個寬度,是因為以前我的寬度是自動調整的,會讓文章橫幅太長,視覺上要左右來回掃描觀看,所以現在才想要把寬度改成固定,並且文章橫幅跨度不要太大。

    因此而讓字顯得比以前擠,這一點我會再仔細考慮看看,也歡迎大家提供這類閱讀感受的回饋^^

    回覆刪除
  10. Re maJor:
    呵呵,以前不這麼做,是因為在我的舊版型理會有問題XD

    現在完全採用官方預設功能調整,問題就解決囉~

    回覆刪除
  11. Re Han.Miao:
    呵呵,其實現在應該還是有帶廣告,如果您沒有看到,可能是有特殊原因吧

    另外這個意見輸入欄位是預設的,我也不清楚怎麼調整XD

    回覆刪除
  12. 因為我是寬螢幕
    所以比較喜歡以前的寬版面
    這樣page才不會那麼長

    看來blogger似乎做了一個不錯的tool
    有空在回去試看看

    回覆刪除
  13. 新版面看起來很好看,希望能繼續維持~

    回覆刪除
  14. 恭喜 異塵行者 更換新的部落格版面喔!

    同樣期待您的精彩文章!

    回覆刪除
  15. 張貼意見的欄位大小可以從右下角按住拖曳來調整。

    雖然感覺文章變得很長(我也是用寬螢幕的),但是新的版面看起來很棒!恭喜!

    回覆刪除
  16. 這個比較乾淨整齊
    我喜歡

    回覆刪除
  17. 我發現換了新版型 windows live writer偵測上會有問題
    不知道版大有沒有遇到同樣的問題
    話說MS好久也沒有更新了

    BTW我覺得這樣的寬度比較剛好
    之前的太寬了 確實會超出視野左右的限制

    但是現在都用reader看 其實也沒有太大差別XD

    回覆刪除
  18. Windows Live Writer似乎無法偵測到正確的寬度,
    不過使用上倒是沒有什麼阻礙。

    另外WLW快要有更新囉!應該會和Windows Live Weave4一起推出,值得期待~

    回覆刪除
  19. 請問~

    文章中提到「繼續閱讀」這功能也上線了
    是在哪邊設定啊?

    回覆刪除
  20. 到後台設定中啟動最新版編輯器,
    這樣你的站內編輯器中,就會出現一個「繼續閱讀」的分段標記按鈕了~

    如果使用外部編輯器的話,就是在你要分段的地方,透過HTML模式,插入直接在你文章裡要分段的地方,
    利用HTML編輯模式,插入〈!-- more --〉這樣的代碼即可(括弧請改成半形)

    回覆刪除
  21. 這個不錯 , 馬上來試試看 !

    回覆刪除
  22. 哇!這次的改版大成功!
    真的很讚, 看了又舒服,
    雖然我也是寬螢幕的,
    版圖稍為有點窄,
    相信行者大大可以改善這問題的!

    回覆刪除
  23. 這次行者改版的確OK很多啊.....祝福你....

    此外,BLOGGER的這次新增功能也是相當成功,相信可以造福許多人類啊.....^^

    回覆刪除
  24. Blogger這個功能真是期待已久……
    以前把網誌的css調來調去,又把圖片修來修去超辛苦

    異塵行者這次改版也很不錯,清新XD
    雖然我也是寬螢幕的但看起來還好

    回覆刪除
  25. 因為Navbar的設計跟網頁風格不配合,
    小弟之前都會用
    #navbar-iframe {
    height:0px;
    visibility:hidden;
    display:none;
    }
    把它hide起來,
    但如果在新版這樣做會造成一條白色的空格,
    但我比較新舊關於Navbar的html code又好像沒甚麼分別,
    所以想請較一下該怎麼改才行,謝謝!

    回覆刪除
  26. 這個隱藏的方法我也不知道
    就看看有沒有高手會貢獻新的修改心得囉

    回覆刪除
  27. 用chrome看不到網址列專屬圖示!!但我用Firefox可你看到喔!

    回覆刪除
  28. 感謝你的提醒,我會來研究看看原因

    回覆刪除
  29. 驚為天人的Blogger templates官方模版終於測試推出...

    閣下文章中有這句,這處的驚為天人是用錯了,驚為天人的對像必須是人物,有此人只應天上有的意思。

    回覆刪除
  30. 呵呵,那一句是「引用他人文章的標題」,
    別人的文章標題是這樣寫的,
    我當然不能去做修改囉(意思是你跟我說也沒用阿XD)~

    回覆刪除
  31. 太棒了 blogger(還是要稱blogspot?) 令人卻步又強大的功能終於有比較簡單的操作方式了,真想馬上從 Wordpress轉來 Blogger喔

    回覆刪除
  32. 分享得很好,我之前沒注意到!

    回覆刪除
  33. 跟前幾樓的大大一樣,遇到WLW會有問題。
    WLW偵測到的版面會比真正的版面寬上許多...
    不知道問題在哪邊

    回覆刪除
  34. 您介紹得真詳細
    我是新手~還在摸索中ㄋ
    有空得好好在您這兒作功課

    回覆刪除
  35. 我是Blogger的舊用戶,其實也沒多舊,只是版面是舊的,我一直覺得版面太窄,今天看到您的文章真有說不出的欎卒,現在我的版面除了重新申請就無法改了嗎?

    回覆刪除
  36. 很棒的分享耶!在這裡收獲多多呢!

    回覆刪除
  37. 應該不用重新申請,
    去後台改動應該就可以了吧?

    回覆刪除
  38. 請問要怎麼設定成像您一樣整個背景都是白的?

    回覆刪除
  39. 在背景中設定成沒有圖片,到顏色設定中把底色選白色

    回覆刪除
  40. 感謝異塵行者的回覆,我有設定沒有圖片以及顏色設定中把底色選白色了,但是範本的框架還是在,有辦法取消範本嗎?

    回覆刪除
  41. 這樣的話就要去修改HTML或換範本了,
    要回覆的話,要載入你之間儲存的備份。

    回覆刪除
  42. 請問一下Blogger 可顯示GIF動畫嗎?
    感謝~

    回覆刪除
  43. 想請問一下,如果想要像您的網頁一樣比較寬沒有邊界(像是範本設計的都好窄),又沒有圖白白的很清爽,要怎樣設計呢?謝謝

    回覆刪除
  44. 可以使用gif動畫

    至於我的邊界設定(我有設定邊界喔!),
    大概是加寬到1000左右,符合大多數1024*768底下可以看到所有網頁內容的需求。

    這部份在目前blogger的範本設計工具中,
    可以自行用拉桿修改喔~
    請看我這邊文章裡就有介紹了^^

    回覆刪除
  45. 您好:
    十分感激您的回覆
    我想再請教一下我在Blogger 上傳的GIF卻不會動,
    http://2amachine.blogspot.com/
    在Google協座平台的上傳gif會動!!
    再次感謝!!

    回覆刪除
  46. 這個我也不是很清楚原因

    回覆刪除
  47. 作者已經移除這則留言。

    回覆刪除
  48. 請問版面最上面那一條(追蹤 分享 檢舉濫用 下一個網誌»)要如何隱藏?

    回覆刪除
  49. 作者已經移除這則留言。

    回覆刪除
  50. Dear 站長,

    能否請問一下,我套用新範本後,在「設計/網頁元素」裡面,不知為何有兩個"網誌文章",兩個都刪不掉。感覺兩個是一樣的,我變其中一個設定,另一個也會變更。

    導致我的文章都重覆出現,請問大大有遇過這個情況嗎?謝謝~

    回覆刪除
  51. 若網誌名稱包含「灣」,使用新範本該字(及該字後面的字)就會不見。必須改成「湾」。這該如何是好?

    回覆刪除
  52. 請問blogger要如何才會有背景音樂呢...???

    回覆刪除
  53. 你分享的 Google Blogger 平台推出超貼心範本設計工具 很棒

    回覆刪除
  54. 作者已經移除這則留言。

    回覆刪除
  55. 請問一下,我是這幾天才開始用blogger的,我在插入繼續閱讀標示後,也更新網誌了,但卻沒有繼續閱讀顯示出來,文章也沒有被隱藏,只是多了一行空白,會是什麼問題呢?

    回覆刪除
  56. 版面很清爽,收穫很多,謝謝!

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

微軟 Bing AI 繪圖工具 Image Creator 免費開放,30秒輕鬆生成圖片

Arc 瀏覽器 windows 版測試心得,用四大介面改造升級專注工作流

Google Maps 我的地圖完全教學!規劃自助旅行攻略

個人知識管理的時間平衡心法,忙碌中我如何維持高效率輸入輸出

5 條「這時候,不要做」清單打破無意識行動模式的低效率循環

如何用 ChatGPT 加速生成一份有圖有文的簡報,實戰案例教學

Google 表單的 10 個專業問卷調查設計秘密教學

ChatGPT DALL-E 3 的7個特殊 AI 繪圖應用教學,勝過 Midjourney