![Blogger 小工具建立導覽選單](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixtoiK80KFpSz13AUD3r2BK1hrlmqFsNOUtaox-2F-rjvOe5F-f92uOqDgBqs-xiThiJ-7BU8DdHTjoeRJ5JsiGHqPLC5vNRI0vtcQVGwHZhMCtjm8soXLAndBjk7QksK4O2v1zOtbEWhP/s600-rw/blogger-menu.webp)
網頁上方放置導覽選單,方便訪客瀏覽站內所有內容,藉以增加瀏覽量與停留時間。Blogger 官方提供許多部落格網頁小工具,卻沒有一款「導覽選單」工具可以使用。雖然沒有選單工具,使用其他小工具也能做出選單效果。
Google Blogger 穩定度高,建立部落格網站的自由度大,會的人可以建構出功能完整的網站,不少知名部落格也使用這免費平台,相對地初學者面對非常陽春的部落格,可能會有點無力感吧!
Blogger 管理後台「版面配置」可自行添加各種小工具到版面中,將「標籤、網頁、連結清單、HTML/JaveScript」這四款小工具放置在標頭下方的「跨欄區」就能顯示選單效果。這種方式可建立簡單型選單,功能更完整的"下拉式選單"則需修改 HTML 增加 CSS 與程式碼。
操作說明:
管理後台「版面配置」,標頭下方的跨欄區點選「新增小工具」。![Blogger 小工具建立導覽選單](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinaOnxN8MgqxbMTKkAO2rFG59Da3Q21-LJ2pQa4h4vP3FOS9EV3bY08jmXVcVqJ4OX0Fo5nUGDGRf5kSRqykSgog473klVwARGFJJrYOtF1GMtQF4_a2atgutEERcYZOF9hEHlEk-1Yu2t/s0-rw/blogger-menu01.webp)
「HTML/JaveScript、標籤、網頁、連結清單」任選一種都可增加選單。
![Blogger 小工具建立導覽選單](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIGhpLNPd3X_Xp7x8HXUgbvRp4oi7Zd6i6e62c5F6jCrj02fx71U2kNUAGLqZemlSxsA3XiTdbl3OyFkQwMDwTJBxM9SETURt8mgEbnTpF23rhRwthWj2PJ-VBzfZ1lUHqipDY4R4LEC5/s0-rw/blogger-menu02.webp)
網頁:點選「+新增外部連結」輸入標題與網址,儲存連結。(網址可輸入文章網址、標籤網址、外部連結。)
![Blogger 小工具建立導覽選單](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR7t3CBjxjx-sem8KP_2YRerSKgkpDL0dc4sl62AbDo7dZQSc3Ckuu0hhXopQTxu_OunJB4GkzscJ583ZbVsR9_TeeY62Pm6l-eCc6H_U5BtAo5DxvAPLXJjDuPqGXEjx9Sm9KdhyI2Bwe/s0-rw/blogger-menu05.webp)
重複上一步驟,儲存要加入選單的網址。拖曳已經儲存的頁面可調整排列順序,儲存網頁小工具新增到版面。
![Blogger 小工具建立導覽選單](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl-BbbcK2yyGIxH-AnJ1skRPt4DC_Beiw1lqtUZFvdz-NYqkCIpjELj1x9ECfoPzdyB1h_wenZrfhkRcqdyByex7QEI5Zzm0Na9H86FbnFFmAXz2kEHKrbfNgOulJT2Rgpn0JJ6H02TFCM/s0-rw/blogger-menu07.webp)
標籤:選擇「清單」顯示,可自行挑選加入選單的標籤,儲存小工具。若選擇「標籤雲」字體大小會不一致。
![Blogger 小工具建立導覽選單](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRvo0GSbKEdadf8uc2fBWDN_cIDY_NWvEhU742504gONppOkU8yRNqL0vpJYfVVgy27sry4jjemHcJT5RhAnw4zo9vdmQ67egjvsIPYrX90uHqE4jPlGw4m7X8qTcmo4yOlfnGDWJYBJ5g/s0-rw/blogger-menu08.webp)
連結清單:輸入網站名稱與網址,點選「新增連結」。
![Blogger 小工具建立導覽選單](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7OezskP8gaAB-A4gk6NREuUImrcaLv_FyfSXCo1XGXOAwDDvEXAS5NWCLxc6A8Ujp1ovBM9Yr7YXCI72smisckPnOMPS9rGcdx63LJk9G2-RY2scK1S4zjeoJqAHnUGb0syU_jSG9e5JV/s0-rw/blogger-menu09.webp)
重複上一步驟儲存多個選單連結,可編輯、刪除已儲存的連結,上下箭頭符號改變排列順序。
![Blogger 小工具建立導覽選單](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXTezhiwTrUkS9PwEcLuQPEStJRaU_3z_oW0prmtq0hOn0sfZ0Kn4m7XP07dmMGf9zSy8agFyqwhSPj-cb6MbEVCUVTN5Vv_-2PnFPW4BwKUj1jY0K7rFb5y8RyYrmNspLWizdbqgu5Wth/s0-rw/blogger-menu10.webp)
HTML/JaveScript:輸入程式碼後儲存小工具。
![Blogger 小工具建立導覽選單](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh__x8Yk5De01KNzhhb1quX3XvT09I7CCbJwZVPH_uWWaSU1fDqEN_hyHNXTvtSzNhNpqsenhiAHvfSPHHPPWXDPm-m012NdIR1M5S8Mhoukqd0nqMmmSYvsNdKwVoJ19Ewj9BKKnXEJpLt/s0-rw/blogger-menu04.webp)
程式碼:
<ul id='mynavid'>
<li><a href='http://www.xiaoyao.tw/'>【回首頁】</a></li>
<li><a href='http://www.xiaoyao.tw/search/label/LINE'>LINE</a></li>
<li><a href='http://www.xiaoyao.tw/search/label/下載軟體'>下載軟體</a></li>
<li><a href='http://www.xiaoyao.tw/search/label/休閒遊戲'>休閒遊戲</a></li>
<li><a href='連結網址'>顯示文字</a></li>
</ul>
主題設計工具的「標籤文字」、「標籤背景」可變更顏色與字體。
![Blogger 小工具建立導覽選單](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvzyTC09tJwY5Jig7B46M-N7RHWYwAeOzg86-yqI0p4-9s5zUKzkO7hISQv7idkB-02-C6vh9J9kHJ2QuZPS-Pxl9XZ8UtMvgqr_UBIPb3jA7EAbeTrFmWLL0grrU5lAxV5QFmbwAJbcIU/s0-rw/blogger-menu11.webp)
各種小工具的選單效果如下圖。
![Blogger 小工具建立導覽選單](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqjhE3Y45lykHfS9WsLT5IANRhFfWTEIOvPesf-EOgJYQC-zbOvKoOcq_ZXnN9lTd0yXB2yaDxh0FG_Exhma7sLsaMK4kPfpCbW9OuUmYIlLqlSkdJSZSDlfdzSgPiu4e3eOuCRYAlCW7e/s0-rw/blogger-menu12.webp)
2 留言
您好~看完您的文章之後,我發現自己的blogger介面上找不到您說的跨欄區耶?
回覆刪除你好:~歡迎造訪~
刪除Blogger需選用官方非響應式主題才有「跨欄區」。