第一步：簡單讀懂HTML與CSS，以及兩者關聯
HTML - (HyperText Markup Language)
電腦專有名詞，超(Hyper)文本(Text)標記(Mark up)語言(Language)，從當時1980年只有純文字檔年代延用至今，目前Blogger支援到了HTML-5。對瀏覽器說明文件架構：標題及段落位置，需要強調的文字.......等等。透過不同HTML標籤語言資訊，讓瀏覽器即可用內建的預設規則呈現出各種不同元素。
CSS - (Cascading Style Sheets)
層疊樣式表，是由許多樣式名稱和樣式設定值所組成的字串。表串設定會讓被套用的HTML標籤顯示不同外觀，一種用來結構化文件(如HTML文件或XML應用)，添加樣式(字型、間距和顏色等)的排版顯示特性，由W3C定義和維護。CSS最主要的目地是幫助HTML將檔案內容與顯示分隔開來，目前Blogger支援到了CSS-3
第二步：了解模板大鋼概念(可參考下圖例)
- 網頁文件宣告(<head>之前)
- 版型設計定義(<head></head>之間)
- 內容細節規劃(<body></body>之間)
- 巨集欄位修訂(<mocro:includable></mocro:includable>之間)
- 頁面元素編排(<b:section-contents id='sidebar-right-1'></b:section-contents>之間)
第三步：理解粗略的blogger結構
<網頁文件宣告>
我相信初學者一定是下載別人寫的Blogger Templates，因此一般進行修改作業可以忽視這一串，雖說如此我們還是必須知道這一串是屬於網頁文件宣告，這一串通常在<head>之前，這一串基本上是不需要我們花時間去增修的地方。
<head外觀各項功能與定義概念>
1.網頁資訊meta
2.網頁標題title
3.版型skin & template-skin
●變數設定variables
●層疊樣式表css
➻=Reset
➻=Global
➻Content
➻Header
➻Forms
➻Forms
➻Tabs
➻Colunms
➻Headings
➻Widgets
➻Posts
➻Comments
➻Accents
➻Mobile
<body文件結構與內容概念>
1.結構body-fauxcolumn
●外圈outer
●頂框cap-top
●仿界fauxborder
●內層inner
●尾框cap-bottom
2.內容Content
●標題header
●標籤tabs
●主文main
3.巨集macro
●邊欄siderbar
●尾欄footer
4.元素section-contents
●元素section
●工具widget
●模組includable
