2014年2月6日

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

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

Wayne Fu 0 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 導覽列相關技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

69 則留言:

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

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

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

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

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

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

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

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

    麻煩您了!

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

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

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

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

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

    回覆刪除
  9. <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

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

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

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

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

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

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

    回覆刪除
  13. <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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    回覆刪除
  27. Wayne謝謝你!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    http://blissdean.blogspot.tw/

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

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

    http://lyonchinyen.blogspot.tw/

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

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

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

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

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

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

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

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

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

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

    http://wanghenrytw.blogspot.com/

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

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

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

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

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

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

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

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

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

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

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

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

    回覆刪除
  59. 我把程式碼都按照位置貼上去了...
    不知道為什麼都沒有看到導覽列出現

    回覆刪除
  60. 您好,按照上述方式更新HTML後,不曉得為何沒反應,可否協助查看?謝謝。
    網址為:https://simple-decor.blogspot.com/

    回覆刪除
    回覆
    1. 感謝回覆,順道拜讀了您另一篇文章,一併解決了行動版的問題,真是太棒了。
      https://www.wfublog.com/2014/05/drop-down-menu-mobile-web-compatible.html

      刪除
  61. Hello Wayne,

    謝謝你的教學
    我嘗試了加入下拉式選單
    https://3littlepigsrtw.blogspot.com/
    網頁版是非常成功^^

    行動手機版郤有點奇怪
    6個選單對手機版來說太長了
    也不懂自動換行

    我的範本只是官方的範本
    所以要向你請教請教了

    回覆刪除
  62. 版主您好:
    非常感謝您分享Blogger相關的資訊,本身也是使用Blogger來建置部落格,遇到問題都會來這邊尋找,受益良多。

    由於想要在新版Blogger導覽列使用本篇教學的效果,所以有將「網頁」小工具拉到導覽列,然後在head上方貼上您的style,並且在body上方貼上所提供的下圖程式碼,但是部落格上卻沒有效果,想請教有沒有我遺漏的地方?
    https://drive.google.com/file/d/1k81RodaUSdMthrJ7H3578i6f_7g7uUzG/view?usp=drivesdk

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP