2014年2月6日

[教學]Blogger導覽列下拉選單﹍安裝懶人包

A+
「下拉選單」是個從部落格建立以來便很想要的功能,不過大部分下拉選單除了安裝方式不容易,通常需要有 HTML 基礎才比較能成功;且另外比較麻煩的是,下拉選單很難具備管理性,也就是日後想調整選單內容、順序時,是個不太輕鬆的工程。

以上便是這篇安裝懶人包的源由,使用這個工具沒有語法基礎也能輕鬆安裝。另外本篇比較少見沒有先說明原理,因為私心偏好做了個 "三角頂端" 的選單形式,其原理十分複雜,需要專文解釋才清楚,如果想瞭解原理的讀者請再留言了,這樣目前可減少一些篇幅另外說明。(2014.12.30補充:三角頂單的原理可參考「簡單漂亮的 CSS 提示框(tooltip)懶人包實作」→「一、CSS tooltip 製作原理及參考資料」→「3. 三角尖端效果」)


<< 請注意!本篇文章含會員限定內容 >>



一、準備動作


基本上,部落格得先建立導覽列,才能使用本篇的下拉選單小工具。因此只要你的網頁或部落格有導覽列,理論上無論是否為 Blogger 平台應該都可試著安裝。不過由於測試環境為 Blogger 官方範本,如果非官方範本、或範本有修改過、或其他平台,由於變數太多,可能無法保證執行效果。以下步驟依照 Blogger 平台來說明:

1. 建立導覽列

◎ 網頁小工具:

Blogger 最簡單的方法就是使用「網頁」小工具當導覽列,請先到後台 → 版面配置 → 將「網頁」小工具拉到導覽列。如果沒有找到這個小工具,請新增這個小工具。


◎ 其他小工具:

許多官方小工具,例如「標籤」、「連結清單」等等,都能在後台 → 版面配置 的畫面,用滑鼠拖曳到導覽列的位置。可參考這兩篇「將 Blogger "標籤"小工具放在導覽列實作」、「Blogger 如何安裝兩個導覽列?」。


2. 更改超連結

本篇下拉選單的效果為「滑鼠移到選單時,自動顯示下拉選單」,這樣的效果在 PC 上沒有任何問題,但行動裝置由於 "沒有滑鼠",必須 "點擊選單" 才能讓下拉選單顯現

因此行動裝置會產生一個問題 → 若原本的選單有超連結,點擊後會另開新視窗。

因此建議導覽列上、有下拉選單的項目,其超連結設定為井字符號 "#",這樣在行動裝置上就不會另開視窗了。需要操作步驟的話可參考「在 Blogger 功能選單使用語法產生動態效果」→「一、使用方式」的圖片,在網址的部分填上 "#"。



二、安裝程式碼


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。


1. CSS 樣式

請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<style>
.tabs-outer, .tabs-outer ul {
overflow: visible !important;
max-height: none !important;
}
.dropMenu li{
display: block;
position: relative;
margin: 0px !important;
padding: 0px !important;
border: none !important;
}
.dropMenu a{
display: block;
text-decoration: none;
border: none !important;
padding: 5px !important;
height: auto;
}
.dropMenu {
top : 45px;
left: -20px;
text-align: left;
position: absolute;
z-index: 100;
margin: 0px !important;
padding: 5px !important;
border: none !important;
border-radius: 4px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, .2);
display: none;
}
.dropMenu:after {
width: 0;
height: 0;
border-left: 140px solid transparent;
border-bottom: 15px solid transparent;
content: '';
position: absolute;
left: 0px;
top: -15px;
}

.dropMenu li:first-child:after {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: '';
position: absolute;
left: 50%;
top: -15px;
margin-left: -10px;
}
</style>


2. 主程式碼

接著請搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<< 請注意!以下為會員限定內容,請先加入會員>>


以上的參數如何修改,請見後面的說明。



三、參數修改


請對照以上的程式碼行號──

1. 基本參數修改

G:如果是 Blogger 官方的範本,這一行通常不需要改,導覽列區塊就是在這裡;如果不是官方範本、改過範本或配置的話,可參考「Google Chrome 開發人員工具」來找到導覽列的區塊,然後置換本行字串 ".tabs-outer"──
  • 如果要填入區塊的 id,請填入 "#" + id 名稱,例如 "#navbar"。
  • 如果要填入區塊的 class,請填入 "." + class 名稱,例如 ".navbar"。

H:如果下拉選單字串會被斷行的話,表示預設數值 120 不夠大,建議調整為更大的數字,直到不會斷行為止。

I:"#e6e6fa" 字串為預設的下拉選單背景色,可參考這個網頁「網頁色碼選擇器」來更改色碼預設值。

J:可自訂下拉選單的提示圖案,也可使用圖片(改為圖片網址即可)。


2. 自訂下拉選單內容

這裡即為下拉選單的管理介面,O~UW~Z 行為兩個範例──

O:紅字 "網站導覽" 請置換為自己導覽列上的選單字串

P~T:
  • 藍色字串請置換為自訂的下拉選單項目名稱
  • http 開頭的網址請置換為自訂的超連結
  • 名稱與網址之間請用蚯蚓符號 "~" 隔開,有空格沒關係,比較能清楚辨識,程式處理時會自動去除空格。(2014.12.2 補充:如果名稱需要使用空白符號,請使用編碼 &nbsp;)
  • 每個項目之間請用小寫逗號 "," 隔開,最後一個項目之後不可有逗號。

在 AC 行之前要插入幾個項目都可以,可複製 P~T 行的格式來修改,並自行增減項目。

想要對照效果請看本站畫面上方的浮動導覽列即可。


3. 有異常顯示的官方範本

由於官方範本很多,無法一一測試所有的狀況,若有發現顯示不正常的情形,或許是該範本使用了特殊的 CSS 設定,請另外留言回報狀況,再看看 CSS 如何調整即可。



四、小結


這個安裝懶人包比起一般需要處理 HTML 碼的方式算是方便許多,而如果懂 CSS 的話,還可自行修改「二、安裝程式碼」→「1. CSS 樣式」,讓自己的下拉選單與眾不同。

另外這個下拉選單也支援「浮動導覽列」,而浮動導覽列的優點請見「這篇說明」,因此建議一併安裝,可為部落格加分不少。



五、重要 FAQ


由於官方範本有很多個,這個小工具不一定能相容所有官方範本 CSS,因此在這裡摘要各種狀況的解決方式。以下提供的 CSS 程式碼修改請對照「二、安裝程式碼」→「1. CSS 樣式」。

Q1: 留言 #4 +Pan Kuan 表示 "希望下拉背景是白色" → 當背景為白色的時候,三角頂端的效果不太好。

Ans: 調整了部份程式碼,請重新安裝,然後將以下這一大段內容刪除 ".dropMenu li:first-child:after {.....}",這樣可以去除三角頂端。


Q2: 留言 #6  Chester Chen 表示 "導覽列下方的框線不見了"。

Ans: 由於 Blogger 官方範本導覽列的框線很搞怪,很多都是用組合式的呈現方式,也就是說框線的 CSS 不一定存在於單一元素,所以很難找到一個統一修改法來套用所有範本。

◎ 可以先試試 留言#14 XYZ 提供的方法,在 .tabs-outer, .tabs-outer ul{....} 的區間內新增程式碼:

min-height: 30px;
30 這個數值請視自己的導覽列高度來修改,而如何得知導覽列的高度,可使用「Google Chrome 開發人員工具」。

◎ 如果不行的話,只好手動幫導覽列加上框線,請在程式碼 <style> 的下一行插入:

.tabs-outer a {
border-bottom: 1px solid #000000;
}

這段範例代表加上「下框線(border-bottom)、黑色、實線、1px(寬度)」,請根據自己的版面狀況增加或調整參數、或增加其他的樣式。


Q3: 留言 #2 摸泥可 表示 "原本的導覽列變得很奇怪,字和背景變得都全白,滑鼠移過去才會出現"

Ans: "導覽列變得很奇怪" 大概是指選項太多所以擠到第二行,那麼刪掉一些選項,讓導覽列維持一行就可以了。另外,如果發生了底色消失、字又剛好是白色,就會發生選單消失的異狀,可參照以下的解決方式:

◎ 在 .tabs-outer, .tabs-outer ul {...} 這個區間,插入一行程式碼

background-color: #666666;
"#666666" 這字串請使用自訂的色碼,可使用「Pixeur超好用的抓取色碼軟體」來找出原本底色的色碼。

◎ 原本的程式碼 I 行建議填入跟上面這一項一樣的色碼字串。


Q4: 留言 #20 陳俊尾 使用了非官方的範本,出現了異常的 "上拉選單" → 那麼非官方範本怎麼裝下拉選單?

Ans: 如果你不是官方範本、且使用了本文的小工具後沒有效果,那麼可參考其他下拉選單工具,例如「Blogger 小技巧」→「水平功能選單」→「下拉選單」→ 就像 mark 介紹的那一個。


Q5: 留言 #38、39 詢問能否使用「多層下拉選單」?

Ans: 這個小工具只能提供一層的子目錄喔,如果想要使用多層子目錄,可以改安裝「Blogger 多層下拉選單」。


Q6: 留言 #49 詢問「下拉式選單裡英文的空格跑不出來,字與字之間會連在一起,請問要怎麼解決呢」?

Ans: 請見程式碼 P~T 行的「2014.12.2 補充」。


Q7: 留言 #43 詢問「下拉選單的連結都會開新視窗。想請教是否有辦法在原視窗開啟連結呢?」

Ans: 請在程式碼中搜尋字串 target='_blank' 然後刪除此字串即可。


Blogger 導覽列相關技巧:

110 則留言:

  1. 謝謝你的文章
    不過我想問, 這個方法在手機上面使用, 是不是會沒有作用呢?

    回覆刪除
  2. 板主大人,第一次留言,首先我要表達感謝之意,您的部落格很實用講解也很詳盡,我網誌的導覽列和留言板,以及文章列表都是照著您的文章完成的。<(_ _)>

    下拉式導覽列也是我一直想要的功能,可是我照著這篇文章操作之後,雖然有下拉式導覽功能了,但原本的導覽列變得很奇怪,字和背景變得都全白,滑鼠移過去才會出現。最後我只好還原成原來版本。

    我有把當時的畫面截圖:http://ppt.cc/k9iZ

    不知道是我做錯了什麼才變這樣?是否有辦法解決呢?

    回覆刪除
  3. <5908558364599925524>(以上內容請勿刪除,從括號之後開始留言)我想你指的是"Blogger行動版本"吧?基本上 Blogger 行動版連任何官方小工具都無法顯示了,所以你在手機上看不到任何工具是正常的現象。

    我猜你會問這個問題是本文提到"行動裝置"的效果,在這裡是指 NB、平板等行動裝置看"網頁版"的效果,而非"行動版"的效果。

    回覆刪除
  4. <1344461762480883849>(以上內容請勿刪除,從括號之後開始留言)monica 你好~謝謝支持!很高興這麼多的小工具能被使用 :)

    由於沒有你的網址(簡介不存在),根據「三、參數修改」→「3. 有異常顯示的官方範本」→ 如果不方便透漏你家的話,至少請告知你用哪個官方範本、或用留言分頁的 "悄悄話" 留你的網址,才能看要如何修改 CSS。

    回覆刪除
  5. 網誌的網址:
    http://morningc725.blogspot.tw/
    我用的範本是簡單。

    回覆刪除
  6. <3478880041419026732>(以上內容請勿刪除,從括號之後開始留言)不好意思,原來是morningc~~官方的簡單範本裡面有七個範本,不過都跟你的配色不一樣,估計你有改過細部的顏色,例如文字你改成了白色,而不知什麼原因當背景色不見的時候,導致白色的文字看不出來。所以現在:

    1. 請你裝上本文的程式碼,保持出錯狀況,我才能進行測試。
    2. 為了暫時讓你的文字顯示,可以先將文字改成黑色,請到後台 範本 → 自訂 → 進階 → "標籤文字"及"標籤背景" 這兩個選項,將跟文字有關的都改成黑色

    以上完成後請通知我。

    回覆刪除
  7. 我現在的下拉式選單狀況是這樣:
    http://www.bigsishead.com/

    我希望下拉背景是白色,但變成透明的....

    麻煩您了!

    回覆刪除
  8. <4200215864988180244>(以上內容請勿刪除,從括號之後開始留言)
    報告版主大人,我改好了~~
    請看:http://morningc725.blogspot.tw/
    外觀怪怪,但連接ok ,動作有些卡。
    再請我看看,感謝了!

    回覆刪除
  9. 我也裝好了... 不過,下方的線要怎麼加回去....

    回覆刪除
  10. <4108767328109233289>(以上內容請勿刪除,從括號之後開始留言)我不懂你的意思...請描述完整一點~~

    回覆刪除
  11. <8064576203377041056>(以上內容請勿刪除,從括號之後開始留言)好的,解決了,紀錄在「五、重要 FAQ」→「Q1」

    回覆刪除
  12. 懶人包是大家的最愛! XD

    回覆刪除
  13. <1845029331876555047>(以上內容請勿刪除,從括號之後開始留言)

    圖片,我把邊框改成背景色,所以看不出來有啥問題,所以就借阿冠的來說明我的問題。

    回覆刪除
  14. <7287926766557339979>(以上內容請勿刪除,從括號之後開始留言)1.你說的"外觀怪怪"大概是指選項太多,所以擠到第二行吧,那請刪掉一些選項,導覽列維持一行就行了。

    2. 「二、安裝程式碼」→「1. CSS 樣式」我修改了一點點程式碼,請重新安裝。

    3. 關於你背景色消失的問題,請在 .tabs-outer, .tabs-outer ul {...} 這個區間,插入一行程式碼 background-color: #666666;

    4. #666666 這個顏色就是你原本的底色,所以你可以考慮在程式碼 I 行填入這個顏色。

    如果 ok 請再回報,將補充到文末的 FAQ。

    回覆刪除
  15. <7522555145791411456>(以上內容請勿刪除,從括號之後開始留言)

    身為摸泥可的忠實讀者 XD
    我剛也研究了一下,不過還是晚了版主一步 XD
    效果如下
    http://imgur.com/5uTG2Pa

    我是修改
    /*新增 CSS*/
    .tabs-inner .widget li a{
    background-color: #666666; /* 選單背景色 */
    }
    .tabs-outer .tabs-inner{
    padding: 0 0 0 6px; /*上 右 下 左 的內距,修改原本內距,讓選單不擠到第二行*/
    }

    另外版主的 bgColor 顏色,我用 #999999
    bgColor = "#999999", // 下單選單的背景色

    話說 @Wayne Fu 的選單上三角形,也太帥了,我第一次看到這個神技 XD

    回覆刪除
  16. <3370399994092767419>(以上內容請勿刪除,從括號之後開始留言)希望有機會看到您的懶人包~~~XD

    回覆刪除
  17. <4354847056434897619>(以上內容請勿刪除,從括號之後開始留言)
    哈哈,我沒有想要下面有一條線,所以沒這困擾,嘻嘻!

    回覆刪除
  18. <4354847056434897619>(以上內容請勿刪除,從括號之後開始留言)

    這是 Google 對 http://www.bigsishead.com,的快取(2014年2月6日)。我的不是官方範本?? 我使用blogger「簡單」之第二個範本。從去年8月一路改成這樣的......

    回覆刪除
    回覆
    1. 我沒有執著上下左右的線,所以沒這困擾,我在意的是網友能不能輕鬆在導覽列ㄧ目瞭然找到想看到東西,上面那條線不見也沒關係呀!

      刪除
  19. <3937654131983855393>(以上內容請勿刪除,從括號之後開始留言)
    是指這樣嗎?
    http://imgur.com/RF6HNRu

    如果是的話,修改
    .tabs-outer, .tabs-outer ul{
    min-height:30px;
    }

    回覆刪除
  20. <5660042326180033667>(以上內容請勿刪除,以下引言請自行刪減) [quote]是指這樣嗎?http://imgur.com/RF6HNRu如果是的話,修改.tabs-outer,.tabs-outerul{min-height:30px;}[/quote]
    ㄟ...怕誤解,更正一下,不是"修改"
    是"新增" min-height:30px;
    到 .tabs-outer, .tabs-outer ul{....}裡面
    線不是不見,只是跑到上面,
    所以 @Pan Kuan 的線也可以加 min-height:40px; 移到下面
    不過我不確定 @Pan Kuan 的線原本在那邊 XD

    回覆刪除
  21. <3937654131983855393>(以上內容請勿刪除,從括號之後開始留言)原來如此,謝謝提供訊息,那麼這個問題還是得解決!(應該就是 XYZ 提供的方法)

    只不過如您所述,您是修改過的範本,已經不是官方範本原本的樣貌,所以就不針對您的範本另外檢視了,原因都在「留言 #8」我提供的連結那篇公告裡面。

    回覆刪除
  22. <122317234715511048>(以上內容請勿刪除,從括號之後開始留言)阿冠你也太不挑了...XD 我看有些範本的確沒有上面或下面的線,才以為你原本就少了框線~~既然會出現 bug, 我還是來補充一下 FAQ!

    回覆刪除
  23. <3688934463476521934>(以上內容請勿刪除,從括號之後開始留言)阿冠的下方原本就沒有框線喔~另外,發現你的不是官方範本,所以要請你自己研究 CSS 怎麼改了,請參考導覽列最右邊的「關於/諮詢」→「諮詢服務/提案合作」→「5. 其他類諮詢」

    回覆刪除
  24. <475837242661840699>(以上內容請勿刪除,從括號之後開始留言)這裡好多摸泥可的忠實讀者啊,我看阿冠也是追蹤者呢 :)

    @摸泥可, 就都試試看吧,我再決定 FAQ 怎麼補充。

    @XYZ, 過獎過獎,您的最新文章也很炫啊,第一次看到這樣的 idea ^^b

    回覆刪除
  25. <4798789984816264908>(以上內容請勿刪除,從括號之後開始留言)謝謝您幫忙研究!不然也不知道還有 min-height 這個思路~

    Chester 的範本看來用 min-height 可以解決,而阿冠的範本由於他塞了其他小工具到 .tabs-outer 裡面,看起來要用別的解法,例如硬加 border,我再補充到 FAQ。

    回覆刪除
  26. <5660042326180033667>(以上內容請勿刪除,從括號之後開始留言)

    哇~~ 解決了耶
    謝謝 Wayne Fu 跟 XYZ 大神

    回覆刪除
  27. 我的下拉式選單完成了!!!
    謝謝版主大大和火星人大大。

    回覆刪除
  28. <5777300556252310915>(以上內容請勿刪除,從括號之後開始留言)

    我來說明一下,我放的其實並不是原始的導覽列,我覺得那不太好用,我是拿"連結清單"起來當導覽列用,不知道這樣會不會在css上出問題?

    其實也不是不挑,而是我原本最想要的是沒有上下線,只想要左右線,但是掛上去就長這樣,就將就著用吧!

    回覆刪除
  29. 有沒有辦法針對 黑底白色 設定下拉式選單,如果我用黑色底的導覽列,使用白色或明度高的顏色文字,下拉式選單背景就必須是深色 (我希望是白底黑字),我不管怎麼怎麼調都覺得怪怪的。

    總覺得文字看不清楚,有辦法修改導覽列文字的顏色嗎? 示意圖

    回覆刪除
  30. <5101986338650451430>(以上內容請勿刪除,從括號之後開始留言)可是我覺得有圓角的頁籤形狀不適合使用下拉選單說,版面、形狀不太好看~或許你可以把 I 行設定顏色的參數改為 "#b6d7a8",這樣會稍微好一些!

    回覆刪除
  31. <918484955643725571>(以上內容請勿刪除,從括號之後開始留言)[quote]我是拿"連結清單"起來當導覽列用,不知道這樣會不會在css上出問題?[/quote]應該沒什麼差,我在「1. 建立導覽列」→「◎ 其他小工具」也有提到這樣的方法。
    [quote]我原本最想要的是沒有上下線[/quote]原來如此~也看過這種類型的導覽列,是可以利用「Chrome開發人員工具」找到修改上下邊框的 CSS 之處,只是Blogger導覽列找這個有點麻煩~><

    回覆刪除
  32. <2265941331561137393>(以上內容請勿刪除,從括號之後開始留言)這個小工具完全沒有去動到文字顏色,系統預設什麼就會顯示什麼,所以你想改文字顏色的話,直接找相關的 CSS 改就行啦,或是去後台範本→自訂,那邊也能找到選項改。

    回覆刪除
  33. 感謝Wayne提供這麼好的安裝方法,謝謝!
    不過我在我的部落格上安裝出現了一點小問題:
    http://blog.mixflavor.com/
    這個下拉選單在我還沒把畫面移動到選單之下的時候,如果滑鼠指上去,下拉選單會變成上拉選單這點雖然不錯,可是點不到⋯⋯XD
    另外是如果我的選單在瀏覽器畫面中央的時候,選單也還是在上面,所以我還是一樣點不到。
    結果就變成一定得要我的選單浮動在最上端的時候才能點選,請教有解嗎~謝謝!

    回覆刪除
  34. <1560726467059945203>(以上內容請勿刪除,從括號之後開始留言)

    我發現自己有點語意不詳XD
    簡單說,我希望下拉選單只能從「下面」出現!

    回覆刪除
  35. <3311028067603477853>(以上內容請勿刪除,從括號之後開始留言)Wayne Fu, 太感謝你了, 真的好了喔!:)

    回覆刪除
  36. <8307773420877993647>(以上內容請勿刪除,從括號之後開始留言)不客氣 ^^

    回覆刪除
  37. <8310707122901236740>(以上內容請勿刪除,從括號之後開始留言)you're welcome~~

    回覆刪除
  38. <889043683530579897>(以上內容請勿刪除,從括號之後開始留言)不錯不錯~

    回覆刪除
  39. <1560726467059945203>(以上內容請勿刪除,從括號之後開始留言)看了你的情形,我很訝異竟然會變成 "上拉選單"...我在想還是修改一下本文的內容好了,因為你的不是官方範本,而我測試的環境為官方範本,所以這個小工具或許無法保證 "非官方範本" 下的執行效果...

    回覆刪除
  40. <1504678969774918827>(以上內容請勿刪除,從括號之後開始留言)由於你有兩排導覽列,請試著先裝在下層的導覽列,看看是否會正常一點?

    回覆刪除
  41. <9028343971609745894>(以上內容請勿刪除,從括號之後開始留言)
    Wayne,我的第二排導覽列是用標籤小工具,我把location = "#Label1", 沒有效果XD 看來暫時跟下拉選單無緣了~

    回覆刪除
  42. <776155193765226816>(以上內容請勿刪除,從括號之後開始留言)其實正常的標籤小工具也是ok的,因為我的分站「三國志11」就是將標籤拉到導覽列。不過我看到你標籤小工具的 HTML 碼跟官方範本完全不一樣,所以你的範本算是"改得很徹底"了..XD(這樣就真的無法套用本文小工具了)

    不過非官方範本的話,可以使用其他的下拉選單工具,例如「Blogger 小技巧」→「水平功能選單」→「下拉選單」→ 就像 mark 介紹的那一個。

    回覆刪除
  43. <5765108688464123094>(以上內容請勿刪除,從括號之後開始留言)
    瞭解,不過我的作業環境不是windows,所以就暫時無緣了~感謝,沒有下拉選單暫時沒關係XD

    回覆刪除
  44. <6206706710275265287>(以上內容請勿刪除,從括號之後開始留言)
    我不是windows也完成了耶~~~

    回覆刪除
  45. <4210384306447971960>(以上內容請勿刪除,從括號之後開始留言)
    我猜 陳俊尾 指的是 mark 介紹的那一項,需要下載軟體,而 陳俊尾 大概是用 linux 系統吧~

    回覆刪除
  46. 建議母選單超連結設定為 "javascript: void(0)"
    改用這個滑鼠不小心按下去,網誌後面也不會多出"#"

    經過行動裝置測試....
    手機行動版:按下去沒發生啥事,沒任何反應
    手機電腦版:母選單按下去沒任何反應,只顯示子選單

    回覆刪除
  47. <9041379896685574420>(以上內容請勿刪除,從括號之後開始留言)
    出現 "#" 會有什麼不好的影響嗎? ^^
    設為 "javascript: void(0)" 除了字串變長,也要另外解析內容,都會耗費系統資源。

    回覆刪除
  48. 你好,這是我的網誌︰http://angelagain.blogspot.hk/
    請問為甚麼我的導覽列會偏向右邊?而且用IE看時甚麼都亂了,謝謝解答。

    回覆刪除
  49. <2916319708641579802>(以上內容請勿刪除,從括號之後開始留言)我沒看到有裝下拉選單喔~而且你的導覽列我看沒什麼異常啊?或許你截個圖、附瀏覽器版本吧。

    回覆刪除
  50. 我的部落格文章導覽列麼突然下拉選單消失了
    我甚麼都沒有動過~前幾天還好好的耶!

    我剛到處都找過了不知道是哪邊出了問題
    能否麻煩您抽空幫我看看?

    回覆刪除
  51. <8796917925758242468>(以上內容請勿刪除,從括號之後開始留言)看了你的程式碼:

    menu["快速文章導覽] = ....

    "覽" 的右邊少了一個雙引號,所以程式當掉了。

    另外,我看到你目前的導覽列是「"面壁王愛3C"」,而程式碼設定的是「"面壁王與Android"」→ 這裡也要改一致,這個項目才能抓到選單喔~

    回覆刪除
    回覆
    1. Wayne謝謝你!

      我程式碼都那邊原本有改成目前導覽列顯示的面壁王愛3c那個的,但後來我有去版面配置裡面網頁把所有都刪除全部重新建立過,不知道是不是因為這個動作造成程式碼恢復到刪除網頁之前的狀態?

      刪除
  52. <6417815568947235415>(以上內容請勿刪除,從括號之後開始留言)抓到全部的錯誤點了,請注意程式碼P~T行的紅字提示:
    1. 你有某些項目沒用小寫逗號隔開
    2. 導覽列的選項名稱為 "哪裡可以找到面壁王" → 程式碼的選項名稱為 "哪裡可找到面壁王"

    所以程式碼的設定細節需要小心檢查囉~

    回覆刪除
  53. 用小螢幕筆電真是讓我眼花不斷!
    謝謝你阿,我下次還是別用小螢幕的電腦改程式碼好了@_@

    回覆刪除
  54. 我又來了@@

    我在修改文章標籤跟程式碼的時候發現到下拉導覽列點進去的搜尋文章只能搜尋"一個標籤"

    比如原來格式是http://www.wallfriendorsino.com/search/label/美食生活-精選下午茶-手工甜點

    我以為要搜尋兩個以上標籤就在後面新增新的標籤網址就好
    可是事實不是這樣=口=
    他還是只搜尋一個,而且會以最後新增的網址為主要蒐尋對象。

    請問這個導覽列下拉子選項每一個項目就只能搜尋一個文章標籤嗎?

    回覆刪除
  55. <3942280406854852241>(以上內容請勿刪除,從括號之後開始留言)所以你的意思是,原本可以用你的方式一次搜尋兩個標籤,而這個下拉選單不行,對嗎? ^^

    回覆刪除
  56. <6469205911337166901>(以上內容請勿刪除,從括號之後開始留言) 不是耶@@ 我原本也沒用成功一次搜尋多個標籤(在導覽列子目錄選單裡)

    所以才想詢問說能否實現在導覽列一個子選項可以搜尋"多個文章標籤"呢?

    因為不想一個文章標籤就一個子選項這樣下拉選單會變得烙烙長~_~

    回覆刪除
  57. <2977204982920337155>(以上內容請勿刪除,從括號之後開始留言)由於樹狀標籤的字串,是利用程式處理,所產生的 "大分類"、"次分類" 等字串,實際上這些分類標籤並不存在,所以是無法搜尋的。

    [quote]能否實現在導覽列一個子選項可以搜尋"多個文章標籤"呢...不想一個文章標籤就一個子選項這樣下拉選單會變得烙烙長[/quote]

    1. 真的要做到這件事也不是不可行,用 js 寫得出來,只是看起來是個很客製化的需求,因此目前只能依客製的案子處理了~

    2. 有人想出用 CSS 做出無限層的下拉選單,可以 google 得到,不過也許你不會想用的,一來能否裝成功是個問題,二來沒有管理界面,日後也是很大的問題。

    3. 有個權宜之計,不想要選單變得很長,可以自己整理標籤,把數個標籤的文章,自己新增一個共同的標籤名稱(非樹狀標籤),然後放在下拉選單即可。

    回覆刪除
  58. <1153411509055759824>(以上內容請勿刪除,從括號之後開始留言) 我現在就是被逼著要去逐步改變我的所有文章標籤

    因為既然下拉選單一個子選項只能放一個超聯結的話就只能這樣做了。 暫時是可以解決問題

    至於真正的樹狀下拉導覽功能等以後文章數量多了有需要的時候我再來委託專案給你吧:)

    回覆刪除
  59. <4303400497682768134>(以上內容請勿刪除,從括號之後開始留言)也不必改變原有的標籤,為文章新增標籤就行了,你可以參考我的作法,在文末資訊區的標籤那一欄,除了樹狀標籤之外,我會安插正常的標籤。

    回覆刪除
  60. <861951706175112384>(以上內容請勿刪除,從括號之後開始留言)哦~原來也可以那樣啊!! 這樣也不錯呢! 那就先這樣好了^^

    回覆刪除
  61. 版大你好,我找不到網頁裡要改成最上層標籤的地方呢,另外已經把語法貼到HTML裡了,但是什麼都沒有?是哪裡出錯呢?現在我還原還沒加上你上面兩步語法的樣子,網址:http://0921498565.blogspot.tw/

    回覆刪除
  62. <4929445952057373029>(以上內容請勿刪除,從括號之後開始留言)你好,一方面你的網頁鎖右鍵,不方便看原始碼,一方面檢查了一下,感覺你好像還沒安裝本文的程式碼,所以不知道出了什麼問題。

    另外不好意思,由於您的網站偏向商業性質,會傾向這是商業諮詢,可能要麻煩按導覽列的「關於/諮詢」→「諮詢服務/提案合作」→ 下方有我的 email 聯絡資訊、或聯絡表單,謝謝!

    回覆刪除
  63. 請問有辦法在導覽列上加入官方小工具嗎?
    還有有辦法讓每一個選項設置不同的圖片嗎?

    回覆刪除
  64. <506711718098869158>(以上內容請勿刪除,從括號之後開始留言)[quote]請問有辦法在導覽列上加入官方小工具嗎?[/quote]可以參考這篇「Blogger 如何安裝兩個導覽列?
    [quote]有辦法讓每一個選項設置不同的圖片嗎?[/quote]由於這個功能比較客製化,麻煩參考「諮詢服務/提案合作」的內容,再用聯絡表單與我聯繫。

    回覆刪除
  65. 版主大人好.
    按步驟插入相關CODE後, 沒有預期的功能選單出現. 曾試著移除標籤及公告小工具, 仍然無法顯示您預設的功能表單. 可否請版大幫忙看一下, 感謝!
    這個部落格是用來記錄我與小孩成長歷程的. 非營業網站.
    http://9ihualien.blogspot.tw/search/label/weebly

    回覆刪除
  66. <1132938019958095205>(以上內容請勿刪除,從括號之後開始留言)看了你的網頁原始碼:
    1. 參數完全沒修改喔,你用的完全是我的預設參數,這樣下拉選單是不可能跑出來的,請詳細閱讀參數修改說明。
    2. 你的導覽列設了兩個,所以已經不是原本單純的原始官方導覽列狀態,因此 G 行的參數一定要改成你要出現下拉選單的那一個導覽列。
    3. 請參照留言 #18 的回覆,你的頁籤形狀不適合拿來當下拉選單~

    回覆刪除
  67. Wayne Fu大, 在使用了您的懶人包後, 真的是變好看了很多, 但有個問題想問一下, 您提供的是從主目錄→子目錄

    那如果我想要主目錄→子目錄→子目錄這樣的話, 若以Fu大的導覽列來說, 網站導覽→如何使用本站→子目錄

    如果是這樣該怎麼設定呢!?

    回覆刪除
  68. <1853374581584952631>(以上內容請勿刪除,從括號之後開始留言)這個小工具只能提供一層的子目錄喔~如果想要使用多層子目錄,可以考慮安裝「多層樹狀標籤」,就像我側邊欄的「文章分類」。(熱門文章第一篇)

    回覆刪除
  69. 謝謝您的教學文章,學到了很多
    但是想學得更深入
    請問多層式選單的話要怎麼製作呢?
    謝謝您

    回覆刪除
  70. <1208516387947463231>(以上內容請勿刪除,從括號之後開始留言)你好,這個問題跟樓上(留言#38)一樣,請看上面我的回覆。另外,如果熟悉 HTML 的話,可以 google 多層下拉選單,來自行製作,非常麻煩就是。

    回覆刪除
  71. <6198119057999901412>謝謝版主的意見^^(以上內容請勿刪除,從括號之後開始留言)

    回覆刪除
  72. 版主您好!不好意思又來打擾,我看語法從頭看到尾,還是厚著臉皮來問了...^^a
    想請問下拉選單中的三角形要怎麼去除掉呢(子選單上頭的那個三角形,不是可以自己設定符號或圖樣的那個)?因為我的母選單字太短,三角形會跑到別的地方去,看起來怪怪的...

    那東西看起來是個向上的箭頭,但是不知道到底是從哪邊設定進去的?還煩請版大開釋!

    回覆刪除
  73. <7980596517498987540>(以上內容請勿刪除,從括號之後開始留言)1. 那個三角頂端是用 CSS 畫出來的,請見「五、重要 FAQ」→「Q1」即可去除

    2. 你的導覽列項目有點窄,可以下拉選單的寬度可以設窄一點,或是把導覽列項目設寬一點,這樣就比較好看啦~

    回覆刪除
  74. <4051784514594008164>(以上內容請勿刪除,從括號之後開始留言)謝謝板主回覆!原來是我自己沒有看清楚內文....後續我會再依板大建議調整寬度,再次感謝 :)

    回覆刪除
  75. 版主您好:感謝您提供的教學,我成功製作下拉選單了。
    但有一個小問題是,下拉選單的連結都會開新視窗。想請教是否有辦法在原視窗開啟連結呢?
    正在測試的網址為:http://socialhousingtw.blogspot.tw。
    感恩 :)

    回覆刪除
  76. <7516831983723827482>(以上內容請勿刪除,從括號之後開始留言)你好,請在程式碼中搜尋字串 target='_blank' 然後刪除此字串即可

    回覆刪除
  77. <525443336920674260>(以上內容請勿刪除,從括號之後開始留言)
    感謝Wayne Fu大~
    我把target='_blank'刪掉後,下拉選單會出不來。但改成target='_self'就可以了。

    回覆刪除
  78. <8760778198527985648>(以上內容請勿刪除,從括號之後開始留言)你可能誤刪了其他字元,導致js當掉,下拉選單才會出不來。當然,改成target='_self' 也是一種解法。

    回覆刪除
  79. 版大您好,看了您這篇文章,我試著將所上研討會的blogger做了下拉選單 但有個問題想和您請教

    選單在「相關活動」那邊,但是為什麼我將滑鼠移過去

    並非像版大您的blogger的選單,是方型的色塊,而是呈現橢圓(?)的形狀?

    不知道能不能麻煩版大您幫我看看是何處有問題?謝謝!

    回覆刪除
  80. <2850540035420207708>(以上內容請勿刪除,從括號之後開始留言)看了你的網頁,圓角頁籤不適合使用下拉選單,你可以參考留言 #18 的回覆,自行更改底色為適當的顏色試試看~

    回覆刪除
  81. 您好,感恩您的资讯!但是为什么我在修改html里面,找不到body 的。。(T.T)

    回覆刪除
  82. <8099061273547008294>(以上內容請勿刪除,從括號之後開始留言)我猜你不常修改範本吧~記得閱讀文章內提到的「備份範本的訣竅」 ^^

    必須滑鼠點進Blogger範本區塊內,再按 Ctrl-F 才能真正搜尋到需要的字串。

    回覆刪除
  83. 版大你好,我試著你的方式去做修改...原本可是跑下拉選單跑不出來,可以請問一下是什麼原因嗎??

    http://blissdean.blogspot.tw/

    回覆刪除
  84. 版大你好,不好意思打擾了,我已經解決了 ^^"

    回覆刪除
  85. 板大您好~
    我做的下拉式選單裡英文的空格跑不出來,字與字之間會連在一起,
    請問要怎麼解決呢?
    以下是我的連結,謝謝您~~

    http://lyonchinyen.blogspot.tw/

    回覆刪除
  86. <501109751654281215>(以上內容請勿刪除,從括號之後開始留言)請見程式碼 P~T 行「2014.12.2 補充」。

    回覆刪除
  87. <8323235480189420110>(以上內容請勿刪除,從括號之後開始留言)板大好~看不道您補充後的需增加的編碼內容耶~

    回覆刪除
  88. <2276595668855253540>(以上內容請勿刪除,從括號之後開始留言)啊~沒注意編碼內容會轉譯無空白字元,已更正為字串 "&nbsp;"

    回覆刪除
  89. <2067498730521091784>(以上內容請勿刪除,從括號之後開始留言)謝謝您,已經成功!!

    回覆刪除
  90. 版大你好,打擾了!我是blogger初學者,看了這篇介紹的下拉導覽很期待自己的博客這樣,
    但是我不到< / b o d y >語法...XDD,我使用的範本-圖片視窗右1,請版大幫幫忙。
    還有,我的範本有修改過,目前處於錯誤中!
    http://akuhausu.blogspot.tw/這是我的網址,感謝你了!

    回覆刪除
  91. <878324893284699462>(以上內容請勿刪除,從括號之後開始留言)找不到 </body> 是很常見的問題,只要「游標點進範本區塊」再搜尋就能找到了~

    回覆刪除
  92. 版大你好,感謝回覆!在範本區搜尋不到才發此問題的,能否有方法可以解決呢?<6165518431379898285>(以上內容請勿刪除,從括號之後開始留言)

    回覆刪除
  93. <651805056665988212>(以上內容請勿刪除,從括號之後開始留言)對了,你試試看用 ctrl-f 搜尋 body 這個字串, 應該只會有兩個結果, 這樣就能看到 </body> 了

    回覆刪除
  94. 請問要怎麼讓下拉式的表單按下去不是跳出新的分頁 而是在原本的頁面跳轉網址

    回覆刪除
  95. <3773088781771335565>(以上內容請勿刪除,從括號之後開始留言)可以付費幫你安裝

    回覆刪除
  96. <3833430125291280493>(以上內容請勿刪除,從括號之後開始留言)請見「五、重要 FAQ」→ Q7

    回覆刪除
  97. 太棒了!!!!!!!已成功~~~太感謝你了~~

    回覆刪除
  98. 你好,我的部落格有看了你的大部分的教學,像是下拉選單+兩個導覽列的安裝。
    目前雖然依舊不完美但還算可以使用^^。

    目前遇到了一個問題想請問一下,

    在部落格的下拉選單,我把他設定到了文章的標籤分類的總網址,EX: 美食、電玩 有關美食跟電玩的文章會分類在這兩個標籤,所以當我點選樹狀標籤時就會開啟分類後的網頁。

    目前從電腦版網頁上可以正常開啟,但手機板卻會變成空無一物的狀態,不知道問題出在哪裡?謝謝

    http://wanghenrytw.blogspot.com/

    回覆刪除
  99. <8635967677859155009>(以上內容請勿刪除,從括號之後開始留言)你好,請參考留言 #1 的回答喔

    如果要自行處理行動版的小工具(例如導覽列), 可以爬一下本站關於行動版的相關文章,在樹狀標籤可找到行動版這個標籤。

    回覆刪除
  100. 大大您好!!我想要請教一下!我照著懶人包的方法都貼上了!但是沒有出現下拉式的選單…不曉得哪裡出了問題…該怎麼跟您討論呢?

    如果是照著正常的方法來使用!又會造成下拉式選單沒有出現在網頁的最上層…ps就是第一層選單會出現!但是第二層的選單就會被文章本身擋住了!

    回覆刪除
  101. <7549398783829160903>(以上內容請勿刪除,從括號之後開始留言)你好,很簡單,請見張貼留言的注意事項第一條「提問請附網址、詳細描述狀況」:http://www.wfublog.com/2014/08/where-ask-blogger-question-skill.html 這樣就行了。

    回覆刪除
  102. 你好,目前網站加入了:下拉式選單(懶人包)的功能、安裝兩個導覽列的功能、自訂標頭(圖)的功能。

    目前有個問題想請問一下~

    Q1:在標頭底色的部分我選的是全黑(在後台的範本-進階),原本在加入了下拉選單&兩個導覽列之前是正常的黑,但安裝兩個小工具後卻變成了漸層黑灰,這不知道是甚麼原因?

    https://201605-test2.blogspot.tw/

    回覆刪除
  103. <8855954455834140190>(以上內容請勿刪除,從括號之後開始留言)
    Q2.目前我的下拉選單,兩個都是用網頁的工具,不知道這樣是否正確?

    主要是因為直接把標籤工具拉上去導覽列的時候,不會成功產生下拉的效果而是產生一整串的標籤,這樣子網頁完全變形。

    這個問題不知道有無相關教學呢?謝謝。

    回覆刪除
  104. <7912410744912331656>(以上內容請勿刪除,從括號之後開始留言)下拉選單的程式不是針對標籤工具寫的,導覽列要用標籤工具的話,數量不能過多。

    回覆刪除
  105. Fu 大,請問一下喔,要怎麼把 cross-column 左右兩邊切到跟 header 部份等長啊?像你的網頁這樣。我一直試都試不出來。也想順便把頁尾版權宣告那塊的寬度和高度都縮減。謝謝!

    測試用網頁:http://philotechtest.blogspot.com/

    PS. 我來想在中文論壇發問,但是「載入編輯器」一直跑不出來…不知道是不是故障,或是因為我用 Opera 不支持,總之先跟你說一下 :)

    回覆刪除
  106. <314644944836478762>(以上內容請勿刪除,從括號之後開始留言)論壇的「載入編輯器」的確會讀比較久,沒辦法因為 Google Drive 不給外連了,dropbox 是比較慢一點。不過 Opera 我試了沒問題,也許是網路剛好塞車吧?換個時段應該就可以了。

    不過因為你的提醒,我找時間也想處理論壇的 js/css 外連,讓載入速度能加快。

    我把提問放到這裡了:http://blogger.wfublog.com/2016/07/blog-post_29.html

    之後也會在該篇回覆。

    "怎麼把 cross-column 左右兩邊切到跟 header 部份等長" → 我應該會寫一篇來回答,不過是加值文章,如果你有加入會員的話,告訴我編號,幫你加點數,之後才能看到內容。

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。