【Blogger】我所套用的Blogger改版技巧>>持續更新中

會想寫這篇文章的原因，主要是我改版的頻率有點頻繁.....

再加上一些Blogger Hack的增加，都需要動到Template的內碼，導致一不小心，就會把整個版面搞到變形。



為了下次改版及手殘改壞版面的需要，我整理了一些，我有套用的改版技巧，以備不時之需。

我所參考的Blog如下：

• Abin's Tech Note
• LVCHEN 的美國生活指南
• Fun New Run High
• Kaie's Blog
• Conscious Choices
• Not My Business
• 羊男實驗の咖啡館
• 免費資源網路社群

動手改造Blog之前，一定要記得備份你的Blogger Template！或是新開一個Blog測試～

• Template 的基本內容和結構@ Abin's Tech Note
• Blogger 版型CSS Layout 簡介
• 首頁長篇文章的收合@ Abin's Tech Note
• 增強標籤分類功能: 標籤雲 (Label Cloud)@ Abin's Tech Note
• 讓側邊列 (Sidebar) 的元件只在首頁顯示/不顯示@ Abin's Tech Note
• 讓側邊列 (Sidebar) 的元件能夠展開和摺疊 (Element Toggling)@ Abin's Tech Note
• 加入相關文章功能 (Related Post)@ Abin's Tech Note
• 其他最新文章模組「終極版」@ Abin's Tech Note
• 「最新回應」模組 (Recent Comments)@ Abin's Tech Note
• 「最新回應」模組 (懶人安裝法)
• 內嵌的文章留言 (Embedded Comment Form)@ Abin's Tech Note
• 調整 Post footer 的回應連結@ Abin's Tech Note
• 作者和一般回應的標示區別 (Author comment highlighting)@ Abin's Tech Note
• 增加文章更新時間 (Show Post Update Time)@ Abin's Tech Note
• 增加文章留言回應的編號 (Show Comment Index)@ Abin's Tech Note
• 為 blogger 留言區(comment) 加個對話框吧!
• 善用及改造 blogger 中的引用文字(blockquote)功能
• 消失的圖示：快速編輯 (quick-edit) & 電子郵件發佈連結 (email-post)@ Abin's Tech Note
• 結合發表文章的日曆模組 (Feed Calendar)@ Abin's Tech Note
• 網誌存檔預設收合 (Archives Default Collapsed)@ Abin's Tech Note
• 在版面格式中放入小圖示@ Abin's Tech Note
• 為文章中圖片製作動態框線效果
• 讓 blogger(blogspot) 文章置頂之偷吃步偏方
• 改造雙欄blogger的版面為三欄式
• 在教學文章中, 與眾不同你的程式碼
• 在blogger(blogspot) 標題列下加入一個水平列的功能選單(menu bar)
• 三個步驟幫blogger(blogspot)的文章日期換裝成日曆-calendar
• 幾秒鐘移除或自動隱藏 blogger頁首的導覽列(navbar) !
• 新增Blogger Header及Post的網頁元素,可加入圖片或Adsense
• 標籤/搜尋頁面只列出標題 (Simplify the result of label and search)@ Abin's Tech Note
• 替部落格加上可隨畫面浮動的導覽圖標及對話框
• 隨機變更 blog banner(圖片) @ Kaie's Blog
• 隨機變更 blog banner(圖片)@ Conscious Choices's Blog
• 動態顯示 NavBar
• Flash 滾動式標籤雲
• 加入 Tweet this 功能@ 將文章以短網址的方式推上 Tweeter
• 在文末加入文章訂閱圖示@ Abin's Tech Note
• 在Blogger文章裡加入推文到Twitter與Plurk圖示@ Not My Business
• Blogger Beta 中 Read More 與 Archive 只顯示標題 作法@ 羊男實驗の咖啡館
• Blogger推出標籤雲的格式及自選標籤@ Fun New Run High
• 在blogger 加入PLURK, Twitter, Facebook, funP, 黑米的推文按鈕@ Fun New Run High
• 讓blogspot的側邊欄 sidebar 伸縮自如@ Fun New Run High
• 在網址列加入具有跑馬燈效果的專屬圖示(animated favicon)吧!@ Fun New Run High
• Free Favicon - 免費favicon收集站，快幫你的網站加入一個網址列小圖示！@ 免費資源網路社群
• Blogger 的自動分頁機制 (Auto Pagination)@ Abin's Tech Note
• 新標籤工具 (Improved Label Gadgets) - Blogger 標籤雲 (Label Cloud) @ Abin's Tech Note
• 官方版「繼續閱讀」(Jump Break Link) @ Abin's Tech Note
• 官方的分享按鈕 (Share Button) @ Abin's Tech Note
• Jump breaks!! Blogger 官方版的繼續閱讀(read more)功能@ Fun New Run High
• 【分享書籤】Share button for Blogger
• Show Related Stories Under Each Post!@ 【無腦安裝】加入相關文章功能
• 用blockquote css 在引用文字的兩端加入雙引號及首字放大@ Fun New Run High
• Blogger Favicon 如何讓部落格有瀏覽器書籤和網址列專屬圖示？
• 【Blogger Hack】讓你的連結Links變成下拉式選單
• Blogger Highlight author comments , 作者回應上色 for Blogger@ after dusk, before dawn
• [Facebook] Social plugins - Like Button 無痛導入@ after dusk, before dawn
• 為你的網誌加入Facebook推文按鈕（Like Button）@ WordPress 中文指南
• 在Blogger裝置具有計數功能的Facebook分享按鈕@ Jason Blog
• [Blogger] Facebook Share / Like Button § 臉書的「分享」、「讚」推文按扭語法分享@ 靖 ● 技場
• 在Blogger文章加上Facebook留言功能@ 工作達人(Job Da Ren)
• Facebook 推出 Send 按鈕，快速傳送好的文章至你的親朋好友 & Blogger 安裝按鈕教學@ 海芋小站
• Add FaceBook Send Button For Blogger@ AllBlogTools.com
• Facebook Share Count Buttons For Blogger@ Blogger Widgets
• How to show short URL’s on Blogger@ BTemplates