從這一篇起，海芋將一連幾篇，慢慢解釋blogger的程式碼，讓您能迅速看懂並修改，而在做任何修改以前，您必須先到後台備分您的程式碼，或是開一個新的blog做實驗，另外建議使用EmEditor、PSPad、Notepad++等編輯器，以免找程式碼找到頭昏眼花喔！
好了，現在要開始進入程式碼的講解了，你準備好了嗎？準備好了就走吧！
首先，在修改大量程式碼之前，您必須做的一件事，就是將要修改的地方註解起來，萬一改壞了，您可以再還原回去，而在JavaScript和CSS中，註解有兩種型態，分別如下：/*我是註解*/其中，「我是註解」為讓您加上註解的部份。
//我是註解
但是，在HTML中，註解就不是這麼回事了，HTML的註解為以下的型態：<!-- 我是註解 -->相信眼尖的您，一定有發現那裡不一樣了吧！
在聊完註解之後，接下來我們就要開始進入Template的部份了。而在此，海芋是以Blogger所提供的Template來講解。
首先，網頁的組成分為兩大部份，一個是頭，一個是身體，頭就是我們所謂的<head>，身體就是所謂的<body>，這些通通稱為網頁的標記(Tags)，在頭的部份，包含了一開始就要執行的程式碼，身體則是包含了要提供給讀者的資訊，如果您對這些名詞很陌生，不妨先去找一下相關的HTML書籍觀看。
而在<head>中，有一個<title>的欄位，則是提供了這個網站的名稱，即在瀏覽器上會顯示的名稱，而在這裡，Blogger是用以下的程式碼來包裝。<title><data:blog.pageTitle/></title>其中，<data:blog.pageTitle/>所代表的意義為您在後台所設定的網誌名稱。
或許您會思考的是，我的網誌名稱都是固定的啊，為什麼不直接打名字，但是Blogger用這樣的設計是有好處的，如果您那一天想要改一下網誌名稱重新出發，您不必到後台去看冗長的程式碼，而只需要去後台，把原本的名稱刪掉，再輸入新的名稱就能改完了，多方便啊！
聊完了<title>之後，接著我們看到<b:skin>的項目，這到底是什麼呢？在這裡海芋偷偷告訴您一個小技巧，您可以將b看為blogger，skin很直覺地翻譯，即是皮膚、外皮，所以他就是blogger的外表，而這裡面確實也定義了許多的CSS，我們就簡單舉一下例子好了。<Variable name="bgColor" description="Page Background Color" type="color" default="#efefef" value="#efefef">其中他有幾個變數，blogger help分別描述如下：
- name: 此名稱只能包含字母或數字，而且範本中的每一個名稱必須是獨一無二的。
- description - 可以是較具描述性的名稱，且可包含空格。 此變數會出現在 [字型和顏色] 標籤中。
- type: 可以是「字型」或「顏色」，字型即為「font」，顏色即為「color」，另外也可以為自動，如「automatic」。
- default: 預設值。 針對顏色，此變數應包含十六進位顏色代碼，例如 #FF0066。 針對字型，此變數會是 font-tyle font-weight font-size font-family 格式的清單。
- value：為您對這個屬性所設定的值。
在Blogger中，亦提供了像PHP存取變數的方式，只要在存取變數的前面，加上「$」這個符號，即可存取了，以一段小程式而言：
body {
background: $bgColor;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}而這段為CSS的程式碼，他亦必須包含在<b:skin>中。好了，大概講完頭部的東西了，接下來的文章，海芋將再慢慢介紹給你其它的項目，敬請鎖定喔！
海芋大
回覆刪除這文章寫的很好，又很清楚。
玩blogger hack的教學者，很多都只教步驟，而不教每個步驟的意義。
也不能怪他們，畢竟講解blogger自訂標籤是有點難度的。
期待您這篇文章，讓更多的人能了解blogger，才會有更多的hack，而不是少數的人翻譯國外文章。
台灣人也要有更多的自製hack ^_^
其實我是想看懂hack才去研究code的，不過看完code就快暈了，呵~
回覆刪除海芋你好：
回覆刪除剛讀了依下你這一篇，在介紹註解的地方你先介紹了JavaScript和CSS中，註解有兩種型態，分別如下：
/*我是註解*/ 與 //我是註解，不過這樣跟剛阿倫校長那看的又不一樣，恰恰好相反，不知道海芋懂不懂我的意思@@"
兩者都是註解的型式，都可以使用。
回覆刪除你好...
回覆刪除1.想問怎麼把blog的code抓出來
連怎麼把code叫出來，並放進PSPad都有問題QQ...
〔範本〕→〔修改HTML〕，下載完整模版
回覆刪除丫丫…好期待下一篇丫~~~
回覆刪除想知道怎麼調整"網頁元素"的版面設定耶…
這系列文共有五篇，您可以在搜尋框搜尋一下。
回覆刪除我想做个导航栏，请问怎么做？O(∩_∩)O谢谢！！
回覆刪除什麼樣的導航列呢？
回覆刪除哇！還蠻喜歡海芋小站的風格，簡單有力...我決定好好學習了
回覆刪除