2013年9月3日 星期二

Blogger 設計教學總覽 (Muous' Blogger Hack)

Blogger 設計教學總覽 (Muous' Blogger Hack)

 (29/8/2013更新)

近三年來,一直使用Blogger的網誌,雖說這外國的網誌平台為博客提供了基本的模板,但如出一轍的版面總讓人覺得單調呆板;若套用第三方的設計,則略為欠缺個人風格;想要自行創作,又對網頁程式一竅不通...
要設計一個獨特的網誌看似不易,但網絡之大,總有速成之法。在外國,很多人以寫網誌作為職業,除了網誌的內容,他們也非常重視其設計,所以網誌設計的教學便應運而生,只要依照其步驟對模板少作修改,便可創作出適合自己的網誌。
自使用Blogger以來,已搜集了不少網誌設計的教學,在2013這新一年,決定套用pixeloplosan網站設計的作品,並加以修改,最後順利做出滿意的效果。
為了記錄曾經使用的教學,決定做一個大整理,列出一份Blogger設計的教學清單,給自己參考之餘,亦作分享之用。


整體版面配置(Blog layout)                                   標題設計(Blog Header Design)                            

背景設計(Background design)
文字及段落屬性(Words 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
隨機文章掛件 (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)﹕

沒有留言:

張貼留言