更換版型的參考資料分享

雖然有人說『為什麼改版一定要發文?』(muki)。

不過, 我還是覺得該 記錄一下到底改了什麼, 以及 分享其中的經驗, 而且說不定有的朋友只是看 RSS, 也該通知大家來看一下。

原本, 比較了幾個版型, 打算『換湯兼換藥』(外觀+功能) 之後, 再把功能逐一加上。

『換湯兼換藥』的 改版步驟 :

• 找到理想的範本 (功能, 模版, 配色)
• 備份舊模版及側邊欄小工具
• 測試新模版
• 更換模版 (側邊欄小工具可以保留哦!!)
• 加上需要的功能

但是, 換模版不到兩天, 就發現有些功能的相容性太難追溯, 不如回復成原來的模版, 再設法把外觀換掉, 來個『換湯不換藥』(只改外觀) 還比較有把握。

至於『換湯不換藥』的步驟也大同小異, 同樣還是要備份以防萬一。

就這樣, 最後改版的結果有一大半沒有在當初的想像之中, 其中還包括一個新功能, 你看出來了嗎 ?

底下先簡介更換模版的參考資料, 下一篇再來說明這次改版的內容。

.

找到理想的範本 (功能, 模版, 配色)

功能

關於『Blogger 的功能擴充』, 可以參考底下幾個站 : (依字母筆劃排序)

• Abin's Tech Note
• iPlay99-部落格工具箱
• Josh's Note
• Nobody Search
• 『發夢』©King
• 白花花-Blogger改造之旅
• 羊男實驗の咖啡館

.

模版

再來是『模版』, 可以請教 Google 大神, 或是套用 Blogger 內建的模版

• blogger 模版 (Google 搜尋)
• blogger template (Google 搜尋)

.

配色

我選了 http://www.colorschemer.com/online.html, 指定一個基色, 可以配出 16 個相關色。
或者還可以參考下面的網頁 :

• 超好用網頁配色 (ㄚ興ㄎ的Blogger)
• 網頁配色入門 (hlb's articles)
• 配色分類字典 (咭片皇™)
• 網頁 配色 (Google 搜尋)

.

備份舊模版及側邊欄小工具

『備份舊模版』 就是在 Blogger 後台的 :

• 版面配置 => 修改 HTML => 下載完整範本

至於, 『備份側邊欄小工具』就比較麻煩一些,

• 逐一叫出 HTML 小工具, 再將內容全選轉貼到文字檔

放形浪High 介紹的『保住側邊欄(sidebar), 少花重覆工!』確實可以在更換模版時保留側邊欄小工具, 不過我覺得還是先手動備份一下比較保險。

.

測試新模版 / 更換新模版

除非很有把握, 否則會 建議先到 Blogger 後台另外開一個『測試的部落格』來測試新模版, 像我的 JavaScript Lab 02 和 Ticker Lab 01。此外, 這些『測試的部落格』也可以拿來練習小工具, 測試程式, 或是展示之用。

再提醒一次, 換上新模版的同時, 依照 放形浪High 介紹的『保住側邊欄(sidebar), 少花重覆工!』可以在更換模版時保留側邊欄小工具哦!!

修改模版的過程, 搭配 Firebug ---- 部落客『玩網頁』的『神器』可以增進效率。

『即時』編輯, 除錯, 觀察 網頁的 CSS, HTML, JavaScript。

和之前不斷的『修改 => 存檔 => 更新頁面 => 試誤 => 修改 => 存檔 => 更新頁面 => 再試誤 =>  ... 』, 比起來, 真的『快了不只十倍速』

.

調整側邊欄欄寛

經過測試, 有些側邊欄小工具可以自動調整欄寛

• 不需特別調整 :
  • Blogger 內建的小工具 (關於我, 追蹤者, ...)
  • Google Reader 的分享項目
    
• witdh 或 ww 可以設定為 auto : 
  • Google Friend Connect
  • FEEDJIT
    
• 無法自動調整寛度:
  • MyBlogLog (ww 只能設為數字, 無法設為 auto)

.

導覽列

這次暫時只加了『導覽列』這個新功能, 參考 挖哩勒~胡說八道 和 lamueno 之後, 改成文字式的按鈕, 再加上收合選單的功能, 還需要再小修。 後續再來介紹細節。

.