Blogger的美化─網頁CSS架構

要對Blogger的外觀作調整，有一部分要直接修改HTML的內容，在此之前，我們先了解Blogger網頁的CSS結構圖，有助於你修改。

從上而下為：

1. body：
   這是整個網頁的主體，設定底色，一般的背景圖片。
    
2. outer-wrapper：
   些處控制網頁大小的實際範圍
   
   #outer-wrapper { width:922px; margin:10px auto 0; padding:0px; text-align:$startSide; font: $bodyfont; } 
   
   如果是設固定寬度：如 width:922px;
   如果是依解析度彈性調整：如 width:95%;
   假使但是你的網頁版型和我一樣用了彷真的記事本，或是類似的版型，設成彈性會讓版型破碎，建議你還是保持固定即可。


3. header-wrapper：
   標題區塊的大小


4. content-wrapper：
   這裏包含了 main-wrapper sidebar-wrapper 兩個區塊
   
   
5. main-wrapper：
   主文區（#main），包含

   1. 文章標題（.post h3）,通常會和日期（.date-header）擺一起
   2. 內容（.post）
   3. 文章相關資訊（.post-footer），如創作者(posted by)、發佈時間、意見及文章分類等。
   4. 意見區（comments）。 

6. sidebar-wrapper：
   sidebar邊欄，這裡放很多小工具


7. footer-wrapper：
   頁尾，標示網站連結及版權宣告、模版設計來源等等資料

「Blogger的美化」系列筆記

• 簡單修改
• 網頁的CSS架構
• 模版的介紹與修改
• 小工具的調整  
• 文章加入「讚」及推文功能
• 加入「相關文章」
• 增加臉書留言版
• 以圖示更換連結文字
• 加入程式窗

參考來源：0與1謎詭世界 http://01mistery.blogspot.com/2008/08/blogger-template-css.html