Blogger 下拉式選單

Blogger 的分類是採取標籤方式, 適用標籤雲顯示目錄.
如果標籤分類很細又多, 樹狀分類或是下拉式選單才適合瀏覽網站.
我的部落格分類簡單, 使用Flash製作大項目選單即可, 或是使用標籤雲.
詳細分類的選單適合詳盡規劃的個性;而我正巧不是這類人... 

假使你的網頁或部落格需要樹狀分類的目錄, 或是滑鼠移動到選單按鈕可以很酷的自動彈出下拉式選單; 或是在側邊置入橫式選單.
當我們對CSS不是很在行時, 可利用一些小軟體來製作分類按鈕.
CSS3 Menu 這個網站下載軟體.  一般的部落客使用它的免費模組選擇性已經很足夠, 假使需要更多新的酷炫選單,可以線上購買升級版.

* Step 1. 打開CSS3 Menu軟體, double click選擇模組,修改樣式.
* Step 2. 點擊按鈕成虛線框的編輯狀態, 填入下方網址等參數.


* Step 3. 增加選單按鈕及子選單按鈕. 達成分類嚴謹的目錄.
* Step 4. 編輯完, " Publish " 將發布成CSS3 menu fileshtml這兩個檔案.


* Step 5. 檢視發布後的" CSS3 menu_files "資料夾, 裡面有一些png索引圖片(或有設定插入Icon小圖在連結前端). 將這幾張圖片上傳到空間或相簿, 取得圖片網址. 
* Step 6. double click 打開" style.css "文件, 找到同名的png圖片字符, 將圖片網址取代. 如: mainbk.png 更改成 http://xxxxxxxxxxx/mainbk.png


* Step 7. 將修改過的 style.css 文件上傳到空間,取得有效網址.
* Step 8. 打開Blogger範本, 修改HTML. 將以下語法嵌入<head>下方.

<link rel="stylesheet" href="style.css 網址" type="text/css" />

* Step 9. 修改html網址檔案的附檔名, 變成txt文件. 或是點擊html檔案, 用瀏覽器打開網址可以看到選單的樣式. 按右鍵檢視網頁原始碼, 將 <body> </body> 之間的HTML內容複製.




* Step 10. 繼續 *Step 8, 修改HTML範本. 如有部落格標頭名稱, 在 </header> 的下方. 或是 <div class='tabs-outer'> 的上方貼入複製的HTML語法. 完成.