2013年8月26日

[教學]讓部落格導覽列選單能浮動置頂

A+
寫完「部落格浮動側邊欄」之後,對於這樣的功能還可以有什麼樣的應用,直覺想到的是水平導覽列選單(也就是 Blogger 的 "網頁" 小工具),認為直接把程式碼拿來套一下應該就能浮動置頂、凍結在網頁的最上方。

2013.12.20 公告:由於本篇程式碼會有些 bug,請直接前往「讓部落格導覽列選單能浮動置頂__更新版」。


試了一下發現小改程式碼即可,於是再加了一點透明的效果,滑鼠經過導覽列時解除透明,就像本站上方這個水平導覽列一般,或是請看下面的示意圖:







一、導覽列置頂的優點

其實此功能不少網站都看得到,例如「Google+」的上方就有,這個設計有不少優點:

1. 減少跳出率:如果是從搜尋引擎而來的訪客,對我們網站不熟,文章讀完、資料找到後,沒有個吸引注意力的設計,通常就直接離開了。那麼如果浮動導覽列恰巧有個訪客有興趣的主題,就有機會留住這位客人了。

2. 隨時提供導航:不是每個上網的人都很熟悉網站的構造、擺設位置等,那麼這個浮動導覽列只要項目設計得好,就能讓這位迷途羔羊的網路生手有一個很好的重點指引。

3. 節省操作:導覽列置頂可以省去按「回到頂端」這個按鈕,網頁可以少安裝、執行一個區塊,而且「回到頂端」按鈕有時會遮住一些文字。



二、安裝程式碼

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

1. 以 Blogger 的操作為例,到後台「範本」→「編輯 HTML」,如果範本裡已經安裝過 jqeury 的話,就不必執行這個步驟(可搜尋看看有沒有 "jquery" 的字串);如果沒安裝過 jquery,請搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>

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


2013.12.20 公告:由於本篇程式碼會有些 bug,原程式碼已經刪除,請直接前往「讓部落格導覽列選單能浮動置頂__更新版」。


3. 如果想要修改參數的話,請依以上程式碼行號參考以下說明:

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

F:藍色數字的參數為導覽列到網頁頂端的距離(px值)。

G:本文的程式碼設計了導覽列透明程度的參數,可填入 0 ~ 1 的數字,0 代表完全透明,1 代表不透明。

改完以上三項即可存檔。



三、注意事項

雖說在本站很容易就完成這個效果,不過拿了其他 Blogger 官方範本測試一下後,發現不一定每個版面都適合安裝,為什麼呢?


1. 頁籤形狀

以分站「三國志 11」為例,原始導覽列的頁籤為上面圓角、下面直角,這樣的形狀如果漂浮在頁面頂端,畫面倒變得有些滑稽,像是漂浮的城牆~


2. 顏色、透明度

後來我把導覽列拉到畫面最上方,經由修改 CSS 讓頁籤的形狀成為四邊圓角,這樣的形狀漂浮在頁面頂端就不會突兀了。拉到畫面最上方及修改 CSS 的過程可參考:


不過這樣的浮動導覽列看起來還是比不上本站導覽列的效果,原因就出在分站的導覽列,個別頁籤的底色本身就有一定的透明度,而且整個導覽列的底色為透明,那麼在滑動的過程中,這個視覺效果會讓眼睛看起來不那麼舒服


3. Blogger 導覽列不能拉動位置

就算使用了非透明底色的導覽列,如果像前面所提的三國志11分站那樣,把 Blogger 導覽列拉到別的位置,再使用本文的浮動導覽列,也可能出現問題,因為浮動的時候可能會發現,底色怎麼不見了?

因為 Blogger 把導覽列的 CSS 拆成好幾個地方放,把導覽列拉到別的位置後,本文的程式碼可能不知道原本底色的 CSS 在哪。因此我想要對 CSS 十分熟稔,才能解決這個問題。


4. 導覽列未設寬度

感謝 +Ken Lo 於【留言 #01】回報,原來本站的導覽列在不同螢幕解析度下(例如 ken 的螢幕為 1600 x 900),浮動導覽列會亂跑,就像下圖一般──



測試了各種 CSS 的調整方法後,發現這是因為本站使用的範本,導覽列沒有設定寬度的緣故,才會一浮動就超出邊界四處遊走。如果讀者也有上圖這樣的情形,只要在導覽列的 CSS 區塊設定寬度為 100% 即可。例如程式碼 E 行所填入的導覽列區塊為 .tabs-outer,那麼就在範本裡搜尋 ".tabs-outer",找到後加入以下紅字部分即可(如果範本沒有,就自己在 <style> ~ </style> 的區間新增以下全部內容):

.tabs-outer {
....  // 原參數內容
width: 100%;
....  // 原參數內容
}



四、小結

結論是,想安裝本文的浮動導覽列,得先檢視導覽列的頁籤形狀、底色、位置等等的因素,才能有滿意的效果。

如果 Blogger 範本的導覽列不符合以上提到的因素,不過有 HTML/CSS 基礎的話,那麼還是有機會經由調整 CSS 來實現浮動導覽列的效果。不然的話,就是關閉官方導覽列,自己直接設計一個導覽列,會是可能的解決方案。


Blogger 導覽列相關技巧:

16 則留言:

  1. 不過沒有置中很怪喔~

    http://myprintscreen.com/s/thum_1377493567.16871891.png

    回覆刪除
  2. <7524856773849646164>(以上內容請勿刪除,從括號之後開始留言)謝謝回報,看了一下分站(使用新範本)的效果,沒有這樣的問題,原本本站(使用舊範本)會隨螢幕大小而變形。

    那麼使用新範本就不用擔心,這是舊範本的問題,我要來改自己的 CSS!

    回覆刪除
  3. <7769158437514707282>(以上內容請勿刪除,從括號之後開始留言)能夠利用置中的語法?

    回覆刪除
  4. <6884045025221334382>(以上內容請勿刪除,從括號之後開始留言)修好了,放在「三、注意事項」-->「4. 導覽列未設寬度」

    回覆刪除
  5. <5122945451522394488>(以上內容請勿刪除,從括號之後開始留言)現在的感覺十分棒!

    回覆刪除
  6. 謝謝Wayne的教學,不過我底色本來就透明(重點是我還不會改==),導覽列改了像中毒一樣,所以後來就先用浮動側欄的方式先頂著用~~~

    希望未來能夠慢慢把導覽列浮動置頂完成!

    回覆刪除
  7. <2727131913184671446>(以上內容請勿刪除,從括號之後開始留言)不客氣,阿冠很聰明啊~浮動側欄的 idea 很棒,就像這個網頁的效果「http://www.heinotes.com/2013/08/Google-Blogger-Sina-Weibo-Like-Butto.html」,不過你增加更多的 link 就更有效益了!

    另外從上面那個超連結的網頁,你也可以看到 "透明導覽列" 浮動後的效果,他把透明底色改成灰色,就解決了版面效果不佳的問題,之後有時間再來寫一篇相關的調整方法吧~

    從你的網頁效果,也發現我的浮動側欄需要修正一下語法,因為當側欄有動態產生的效果時(例如廣告),浮動側欄的座標會抓不準,導致被遮住,改完後會通知你!

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

    謝謝Wayne,我昨晚也有發現浮動側欄有時會去重疊到廣告,不過我想說先放這樣看看效果如何。目前這段時間把透明導覽列的東西先移到浮動側欄裡,原本的導覽列位置我就先放些社群連結來做網站"頭"跟"身體"的區隔(不過如果能夠學學修改底色的css就更棒了!)。

    我的浮動側欄目前選取幾個主打的明星商品來跑,不然一長串的話會不會像在提肉粽呀!哈哈!

    回覆刪除
  9. <2734570502652834093>(以上內容請勿刪除,從括號之後開始留言)我修改了「浮動側邊欄」的程式碼: http://wayne-fu.blogspot.tw/2013/08/blogger-floating-side-column.html

    主要是修改 H 行的部分(因為不明顯,就不公告了),請把程式碼覆蓋原本的程式碼,再麻煩回報一下效果,我覺得應該有比較好,謝謝!

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

    我剛修改了,應該是沒問題,至於我底部區塊會被蓋到的問題,我就用
    topH = 0,
    bottomH = 1000,
    這個方式來解決,謝謝Wayne^^!

    回覆刪除
  11. <8025140741433894361>(以上內容請勿刪除,從括號之後開始留言)
    剛剛發現時好時壞,有時候會壓到廣告有時候又不會.....

    回覆刪除
  12. <3307137831174758399>(以上內容請勿刪除,從括號之後開始留言)當側邊有很多動態載入的內容時,在載入完成前,浮動區塊的位置並無法計算出來。

    所以修改的原理是,等網頁全部載入後,再取得浮動區塊的正確座標。而如果網頁全部載入前,畫面就捲動到浮動區塊的話,那麼我想就會出現稍微異常的情形,以我目前的技術這也是沒有辦法的事情。

    不過我想訪客在正常的操作下,一般是沒什麼問題的。

    回覆刪除
  13. <7461277372396265538>(以上內容請勿刪除,從括號之後開始留言)
    是的,我也覺得目前先這樣就好,因為之後google adsense 有機會覆權後,其他的廣告也會拿掉~~~

    回覆刪除
  14. <466499412847983817>(以上內容請勿刪除,從括號之後開始留言)好的,浮動導覽列的底色過陣子來研究~

    回覆刪除
  15. 安裝新範本後,我再次安裝浮動導覽列,可是,我的導覽列走位有點怪 (當網頁滾動時,搜尋框會左右移動),這個問題要怎樣解決?

    回覆刪除
  16. <3719044426877218549>(以上內容請勿刪除,從括號之後開始留言)@ken, @pan kuan, 發了更新版本,請參考這篇「讓部落格導覽列選單能浮動置頂__更新版」。

    回覆刪除

張貼留言注意事項:

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