Blogger 設計教學總覽(Blogger Hack)

近三年來，一直使用Blogger的網誌，雖說這外國的網誌平台為博客提供了基本的模板，但如出一轍的版面總讓人覺得單調呆板;若套用第三方的設計，則略為欠缺個人風格;想要自行創作，又對網頁程式一竅不通...

要設計一個獨特的網誌看似不易，但網絡之大，總有速成之法。在外國，很多人以寫網誌作為職業，除了網誌的內容，他們也非常重視其設計，所以網誌設計的教學便應運而生，只要依照其步驟對模板少作修改，便可創作出適合自己的網誌。

自使用Blogger以來，已搜集了不少網誌設計的教學，在2013這新一年，決定套用pixeloplosan網站設計的作品，並加以修改，最後順利做出滿意的效果。
為了記錄曾經使用的教學，決定做一個大整理，列出一份Blogger設計的教學清單，給自己參考之餘，亦作分享之用。


整體版面配置(Blog layout)

標題設計(Blog Header Design)
背景設計(Background design)
文字及段落屬性(Word Design)
邊欄設計 (Sidebar Design)﹕

1. How to Show and Hide Widgets in Blogger ?
2. How to Make Each Sidebar Widget a Different Color on Blogger
3. Widget customization - how to style each widget differently?
4. How to create a scrolling or static sidebar menu
5. blogger:固定导航栏位置以及滑动伸缩效果
6. jQuery change the .height when appending content

留言欄設計(Comment Design)﹕

1. Three Color Styles For Blogger Threaded Comments With Author Comments Highlighted

連結設計(Link Design)﹕

1. Add Flashing Color Links To Blogger
2. Cool New Christmas Snow Storm Effect For Blogger Blogs

內容排版﹕

1. Blogger Tutorial: How To Divide Post Into Two (2) Columns?
2. HOW TO WRAP TEXT AROUND A VIDEO
3. HTML Background Code

分類掛件 (Label Widgets)﹕

1. Blogger Custom Label Widget Using Individual Category Feeds
2. How To Customize Labels Cloud in Blogger Blog
3. New AJAX Navigation Menu Widget for Blogger

留言掛件 (Comment Widgets)﹕

1. Add Recent Comments Widget With Avatars To Blogger
2. Recent Comments Widget For Blogger
3. Recent Comments Widget with Avatar for Blogger/Blogspot

相關文章掛件 (Related post Widgets)﹕

1. Related Post Widget for Blogger using OutBrain
2. Fancy Black Skin For LinkWithin Gadget
3. 5 Type of Related Post Widget For Blogger With Thumbnails

隨機文章掛件 (Random post Widgets)﹕

1. Random Post Widget For Your Blogger Blog

熱門文章掛件 (Popular post Widgets)﹕

1. Add a Popular Posts Gallery just above your Blogger posts
2. Simple Recent Posts Widget For Blogger/Blogspot

圖片輪播掛件 (silder)﹕

1. Add a Simplet Jquery Featured Slider to Blogger
2. Add Jquery Nivo Slider in Blogspot/Blogger
3. Simple Stylish JQuery Image Slideshow For Blogger
4. Add Borders to the Images in Blogger Post

搜尋掛件(Search Box)﹕

1. Stylish Search Box For Blogger Blog
2. Add CSS Search Box to Blog

分享掛件 (Share Bar)﹕

1. New Floating Social Sharing Bar Widget for Blogger / Blogspot
2. Add Floating Vertical Share Bar to Blogger Blog

訂閱掛件 (Subscribe Widgets)﹕

1. Static Follow By Email Pop Out Widget for Blogger / Blogspot

回到最上掛件 (Back to top Widgets)﹕

1. Animation using CSS3 KeyFrames and jQuery's scrollTop() function
2. How to add smooth scrolling Back to Top Button for Blogger

公告欄 (Notification Bar)﹕

1. Releasing Blogger Notification Bar!
2. Reposition Navigation Buttons in Blogger!

廣告設計 (Google adsense)﹕

1. 6 Ways To Optimize AdSense Ads To Increase Revenue
2. How to Insert Adsense Ads Below Post Titles in Blogger?
3. 並排兩個Google AdSense廣告
4. 網路廣告的標準尺寸