2014年9月23日

[小工具]回到頂端(Go Top)按鈕放在浮動導覽列實作

A+
上一篇「快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計」留言 #18 Jean Hsiung 詢問:「我對您的"↑TOP"鈕比較有興趣,這個有沒有教學?」。

為何 WFU 要將 "回到網頁上方" 的這顆 Go Top 按鈕放在導覽列?主要是因為閱讀時,眼睛不喜歡螢幕上有浮動區塊,無論造成文字被遮住(例如「浮動側邊欄」的實例)、或是有個東西在某處飄,總是覺得怪怪的。個人能接受的浮動區塊,只有在網頁「最上方」以及「最下方」,因為這樣就感覺不出有浮動區塊,也是比較友善的使用者體驗。

所以將「↑ Top」按鈕放在浮動導覽列,算是個人偏好,不過也是有知名網站採用這樣的設計,例如「Feedly」,那麼以下就來看看這樣的功能如何實作。



一、錨點基本語法


如果是舊版的官方「網頁」小工具,就可輕易完成這件事。可惜幾個月前官方「網頁」小工具更新後,不再讓使用者擺語法,因此幾年前寫的「在 Blogger 水平功能選單(Menu Bar)使用語法產生動態效果」,這個方法目前已經失效。

現在導覽列想要像之前一樣使用圖片、或是語法效果,必須在後台直接改範本內容,那麼就必須了解一些基本 HTML 語法。

首先,「回到頂端」的錨點語法很簡單,就像下面這樣:

<a href="#">↑ Top</a>
藍色字串可改為自訂文字。




二、UL LI 語法


接下來需要了解的是 UL LI 的用法,基本教學與範例可參考「符號清單 ul li」。

Blogger 的導覽列,就是使用 ul li 來產生導覽列上面的各個項目。原本 ul li 應該是垂直排列,但是 Blogger 利用 CSS 設定每個 li 都是「向左浮動」(float: left)後,就能讓每個項目成為水平、且靠左排列。

Blogger 的導覽列語法,在網頁原始碼中大概長得像這樣:

<ul>
<li><a href="連結1">項目1</a></li>
<li><a href="連結2">項目2</a></li>
<li><a href="連結3">項目3</a></li>
</ul>

如果我們能在最後一個 </li> 之後、</ul>之前,插入一行 li 清單,並設定 CSS 為「向右浮動」,那麼就可以實現本文的效果了。



三、修改範本


有了以上概念後,我們可以開始進行實作。在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

導覽列的程式碼通常位於 "PageList1" 這個小工具,請在範本中搜尋 "PageList1" 這個字串,如下圖──



展開折疊區塊後,往下可找到如上圖紅框的 <ul> ~ </ul> 區間,接著在 </ul> 的前一行,插入以下程式碼:

<li style="float: right;">
<a href="javascript:;" onclick="$('html, body').animate({scrollTop: 0}, 500);" title="回到頂端">⇧TOP</a>
</li>

  • 以上所有的字串("回到頂端"、"⇧TOP")都可自訂
  • 藍色字串的 CSS 參數可造成「向右浮動」的效果
  • 綠色字串使用 js 語法,可讓回到頂端的動作有動畫效果。
  • 紅色參數 500 代表以 0.5 秒的時間滑動回到頂端,可自訂這個參數的大小,設得越大代表滑動時間越久。



四、浮動導覽列


這是本文最後、且最重要的一個步驟了,必須參考「讓部落格導覽列選單能浮動置頂」來安裝浮動導覽列的功能。

如果沒有安裝這個功能,那麼導覽列無法隨時出現在畫面上方,那麼這個「Go Top」按鈕,訪客也沒有半點機會可按,就等於形同虛設了,對吧!



五、一點補充


如果導覽列的項目很多,那就會發生沒有足夠空間擺放「Go Top」按鈕的窘境。除了想辦法去蕪存菁、刪減導覽列項目之外,我們能做的,就是另闢其他導覽管道。

如果修改範本能力強的話,可以參考 WFU BLOG 的標頭(或是「公佈欄」→「9.9 新版本網站標頭」的圖片備份),將其他的導覽項目例如「文章列表」、「訂閱文章」等等放在標頭區塊,實作訣竅請見「Blogger 範本__(二)標頭、導覽列、側邊欄、頁尾區塊的程式碼」→「留言 #4」的回覆。

另外也可參考「Blogger 如何安裝兩個導覽列?」,畢竟製作兩個導覽列也是很常見的網頁技巧,當網站規模越來越大時,一個導覽列往往是不敷使用的。


Blogger 導覽列相關技巧:

9 則留言:

  1. 現在 HTML/Javascript 小工具不能放程式碼了喔?太久沒有修改 Blogger 都不知道這個消息。

    回覆刪除
    回覆
    1. 沒有啦~導覽列是指「網頁」小工具,以前可以 "動手腳",現在不行了~

      刪除
  2. 你好!好感谢你分享这么多做部落格的经验.谢谢了!我在我的部落格成功安装了你这个浮动的按钮后,不知道为什么我博客最上面的flash不工作了.能帮我看看吗?谢谢!http://winnipegcn.blogspot.ca/

    回覆刪除
    回覆
    1. 你好,不好意思由於您使用的不是官方範本,若程式碼互相之間產生衝突的話,請參考這個「諮詢網頁」,必須按「3. 網站維護/優化/其他類諮詢」處理。

      刪除
    2. 解决了上面slide问题,是因为有两个不同版本的jquery.min.js,去掉一个上面的slide可以工作了,但是由于是1.5.1版本,结果按钮不工作了.呵呵!也不能换高版本的,否则博客菜单都不出来了!晕!不过学了不少东西,谢谢了!

      刪除
    3. 看來您的 debug 實力不錯呢,幾個建議:
      1. jquery 可用高一點的版本,例如 1.8.2,舊版本才能支援的工具想辦法淘汰
      2. 下拉選單可在本站搜尋「下拉選單懶人包」
      3. slide 可在本站搜尋「圖片輪播外掛」
      4. go top 按鈕建議找透明圖檔 (.png) 效果較好

      刪除
    4. 谢谢你的回复,我去试一试.嗯,我是想要一个红色的png的按钮,居然没有找到一个心仪的.呵呵,我上传了一个到google云盘,共享了,用你的获取链接地址的工具,结果贴出来图片不显示.但是js的文件的地址都可以用.

      刪除
    5. 圖片建議不要放在 Google Drive,請參考這篇「Google Drive 當圖床對 Blogger 的不好影響__使用 Picasa 的三大好處」。

      只要在 Blogger 後台編輯文章的畫面,上傳圖片後就會產生連結(從html模式看),用這個圖片網址即可。

      刪除
    6. 好的,谢谢!每次来你博客总有收获!感谢你的分享!

      刪除

張貼留言注意事項:

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