.png)
圖1. 網站行動版頁面下方的提示框，
示範頁面，用手機打開或是縮放視窗檢視效果
這次的小元件也是受到一些網站啟發而設計的，特別專注在行動版頁面(或是說手機版頁面)。越來越多人使用手機瀏覽網頁是一個無法回頭的趨勢，說不定正在看這篇文章的你就是用手機在看呢！手機王的行動版網站是我第一個看到這個功能的地方，它的行動版頁面當你在往上滾動頁面，下方會浮現按鈕框，可以進去範例頁面試玩看看。
這個功能其實在Facebook或是Google+的app中也有，回想一下就會知道我在說什麼。基本的想法大概是這樣的，在手機介面狹長的滾動頁面中，當隨著不斷往下閱讀內容後，但是又還沒到達頁面底端時，這時讀者不想繼續看了(往下滾動頁面)，他能夠做的有兩個動作：
1.關掉頁面：這個時候只能說掰掰了
2.往上滾動頁面：那這表示你的網站還有機會留住讀者
沒錯這時候就是要利用讀者往上滾動頁面時提供一些選項可以點擊，降低跳出率，並且能夠增加網站停留時間，「網站停留時間」的數據應該是很多部落格版主非常在意的，好的內容跟網站能夠讓讀者停留較久的時間，也表示讀者更有可能投入和網站的互動中。所以這次幫blogger加入了這個功能。以下一樣是程式碼的部分，小地方可以照自己的網站性質去做調整。(強烈建議在修改blogger範本前事先備份範本)
一、載入jQuery
在<head>跟</head>之間填入下面程式碼，如果網站已經有載入lazyload之類的函式庫，建議可以把語法貼在一起，比較方便管理。另外建議之前就有載入過jQuery函式庫的把它換成下面的新版，效果支援度會比較高。
在<head>跟</head>之間填入下面程式碼，如果網站已經有載入lazyload之類的函式庫，建議可以把語法貼在一起，比較方便管理。另外建議之前就有載入過jQuery函式庫的把它換成下面的新版，效果支援度會比較高。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script> |
二、HTML程式碼
在<body>跟</body>間填入下面程式碼，最好是放在<body>後面幾行或是</body>前面幾行比較方便之後管理時尋找程式碼。第1行跟第2行是blogger判斷式，第1行是要讓效果只在行動版顯示，第2行是要讓效果只在文章頁面顯示。記得網址要改成自己網站相對應的網址。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 行動版浮動按鈕的html語法 --> | |
| <b:if cond='data:blog.isMobile'> | |
| <b:if cond='data:blog.pageType == "item"'> | |
| <a href='自己的網站首頁網址'> | |
| <div class='footergohome'> | |
| 回到首頁 | |
| </div> | |
| </a> | |
| <a href='網站的最新消息頁面網址'> | |
| <div class='footergoaboutme'> | |
| 最新消息 | |
| </div> | |
| </a> | |
| </b:if> | |
| </b:if> | |
| <!-- 行動版浮動按鈕的html語法 結束--> |
三、CSS程式碼
在<head>跟</head>之間填入下面程式碼，如果熟悉CSS可以自己修改一些屬性的值，以搭配自己的網站介面設計。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style type='text/css'> | |
| .footergohome{ /* 回首頁浮動按鈕的css語法 */ | |
| font-size:28px; | |
| text-align: center; | |
| z-index: 20; | |
| display: none; | |
| position: fixed; | |
| padding: 15px 15px 15px 0px; | |
| background: #eee; | |
| width: 46%; | |
| bottom: 0px; | |
| right: 0px; | |
| float: left; | |
| } | |
| .footergoaboutme{ /* 浮動按鈕最新消息的css語法 */ | |
| font-size:28px; | |
| text-align: center; | |
| z-index: 10; | |
| display: none; | |
| position: fixed; | |
| padding: 15px 35px 15px 15px; | |
| background: #dcdcdc; | |
| width: 50%; | |
| bottom: 0px; | |
| left: 0px; | |
| float: left; | |
| } | |
| </style> |
四、jQuery語法
要讓視窗出現跟消失需要用到jQuery語法，一樣在<head>跟</head>間填入下面程式碼。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script type='text/javascript'> // 行動版浮動按鈕的js語法 | |
| $(document).ready(function(){ | |
| var previous = 0, | |
| textWindowNow = 0; | |
| $(window).scroll(function(){ | |
| previous = $(this).scrollTop(); | |
| if(textWindowNow - previous >= 10){ //上滚 | |
| $('.footergohome,.footergoaboutme').show("blind", 200 ) | |
| } | |
| else if (previous - textWindowNow >= 5){ //下滚 | |
| $('.footergohome,.footergoaboutme').hide("blind", 300 ) | |
| } | |
| setTimeout(function(){textWindowNow = previous;},0); | |
| }); | |
| }); | |
| </script> |
程式碼全部貼好之後，可以修改一下註解，改成自己喜歡的註解，這點蠻重要的，在註解中寫進幾個關鍵字，方便日後搜尋可以更快速找到目標。像我這裡用的是「浮動」這個關鍵字。之後就可以點選「儲存範本」去自己網站看看囉！
