HTML / CSS 比喻教學

各位高手，小妹有語法問題請教大家。

最近有點空閒時間，所以研究起「下拉式導覽列」這玩意兒，
參考的網址為：http://www.twkate.com/2011/06/bloggerdrop-down-navigation-menu.html?m=1

步驟大致分為兩個而已
1. 先在]]></b:skin>前面加上一段落落長程式碼
2. 找到類似title='你的部落格名稱' type='Header'地方，在</b:section> </div>下方加入標籤階層

首先，步驟1我就是直接無腦複製貼上在]]></b:skin>前面...儲存範本無顯示任何東西。
接著，步驟2我找了一陣子，自以為弄好貼上後，儲存範本時卻出現數個end-tag錯誤說明 (啊啊啊好心慌啊><)

錯誤截圖在此：http://goo.gl/d22Jwr

不知道是end-tag問題還是怎樣，有請哪位高手指點迷津，
告訴小妹下一步路該往哪兒走~阿屋QQ
感激不盡


Ken Lo
我個人推薦 +Wayne Fu 的最新精品：
http://wayne-fu.blogspot.hk/2014/02/blogger-drop-down-menu-easy-installation.html

Ida Wu
+Ken Lo  是的是的，有看到這一篇，但是語法小弱弱我...選擇看凱特解接的教學文...+Wayne Fu 的教學挖跨謀啦哭哭QQ

Wayne Bot
+Ida Wu 你好像搞相反了喔～凱特的那一篇至少需要懂 HTML 語法才有辦法安裝及管理的，不了解語法的話日後要怎麼增、減都是個問題。可能我這篇看起來內容比較長，其實按著步驟一步一步來，一定可以成功的，看留言就知道很多成功案例啦 ^^
(我看你是官方範本，沒問題的)

Ida Wu
+Wayne Bot 喔不！！！我再研究看看，這消息太令人震驚了！！

Mark X
+Ida Wu 分享一點修改範本的基本概念.
步驟一,  在  ]]></b:skin> 前面放的那些不叫程式碼, 叫做樣式; 或要簡稱為CSS也可以. 它就像是衣櫃, 讓妳掛上喜歡的衣服. 放在衣櫃裡時, 是看不見選單效果的.
第二部份的選單階層則像是妳開始穿搭衣櫃裡的衣服, 完成後才能看到選單效果.
您現在面臨幾個問題：
1. <ul> </ul> <li> </li> 這類的標記都是成雙成對的. 使用了開頭 <li> 就該會有個 </li> 當結束. 就像是衣服都穿搭好了, 最後的一雙絲襪卻只穿了一隻. 當妳準備出門時, 照了Blogger範本魔鏡, 它就 "嗶 嗶" 亮紅燈不讓妳出門; 只因少穿了一隻絲襪不好看. 那麼請檢查是否都有正確使用成雙的標記?
2. <a expr:href='data:blog.homepageUrl'> ... 這個是Blogger特有、固定的元素程式碼, 它本身會自動符合妳的首頁網址. 第1274行請不要擅自改成：<a expr:href='data:http://monkeyida...'>
3. 選單連結裡的 http://monkeyida.blogspot.tw/search/label/...  tw 最好改成 com . 因為這種直接寫在範本裡的架構和動態載入選單的架構不同, 會顯示在搜尋參考中, 這對您的搜尋SEO有幫助, 萬一以後您購買使用自訂網址, 那些 tw 結尾的搜尋結果都會變成無效網址, 很可惜.

稍微看一下而已, 其他細節不多言了.

Ken Lo
+Mark X "稍微看一下而已" 0.0 ...
這個說法風趣幽默之如，又能夠帶出重點 ^^ (厲害~)
+Mark X 真的覺得你見識廣博，以前問你好多事情，即使不是你的專長，你都能解答我的疑問 XD

Mark X
+Ken Lo 老來成精, 這話還是有些可信度的, 唉...

Ida Wu
+Mark X 是傳說中的神龍見首不見尾的X man嗎？你的講解我有聽懂耶，容我叫一聲大師。
謝謝大家的討論，我明天再努力看看，成功離我不遠啦花哈哈哈哈(明明還沒改卻自以為成功的人)

Wayne Fu 
+Mark X 真是精彩的重點說明，收錄為精華文章