.png)
圖1. 網站行動版頁面下方的提示框，
示範頁面，用手機打開或是縮放視窗檢視效果
這次的小元件也是受到一些網站啟發而設計的，特別專注在行動版頁面(或是說手機版頁面)。越來越多人使用手機瀏覽網頁是一個無法回頭的趨勢，說不定正在看這篇文章的你就是用手機在看呢！手機王的行動版網站是我第一個看到這個功能的地方，它的行動版頁面當你在往上滾動頁面，下方會浮現按鈕框，可以進去範例頁面試玩看看。
這個功能其實在Facebook或是Google+的app中也有，回想一下就會知道我在說什麼。基本的想法大概是這樣的，在手機介面狹長的滾動頁面中，當隨著不斷往下閱讀內容後，但是又還沒到達頁面底端時，這時讀者不想繼續看了(往下滾動頁面)，他能夠做的有兩個動作：
1.關掉頁面：這個時候只能說掰掰了
2.往上滾動頁面：那這表示你的網站還有機會留住讀者
沒錯這時候就是要利用讀者往上滾動頁面時提供一些選項可以點擊，降低跳出率，並且能夠增加網站停留時間，「網站停留時間」的數據應該是很多部落格版主非常在意的，好的內容跟網站能夠讓讀者停留較久的時間，也表示讀者更有可能投入和網站的互動中。所以這次幫blogger加入了這個功能。以下一樣是程式碼的部分，小地方可以照自己的網站性質去做調整。(強烈建議在修改blogger範本前事先備份範本)
一、載入jQuery
在<head>跟</head>之間填入下面程式碼，如果網站已經有載入lazyload之類的函式庫，建議可以把語法貼在一起，比較方便管理。另外建議之前就有載入過jQuery函式庫的把它換成下面的新版，效果支援度會比較高。
在<head>跟</head>之間填入下面程式碼，如果網站已經有載入lazyload之類的函式庫，建議可以把語法貼在一起，比較方便管理。另外建議之前就有載入過jQuery函式庫的把它換成下面的新版，效果支援度會比較高。
二、HTML程式碼
在<body>跟</body>間填入下面程式碼，最好是放在<body>後面幾行或是</body>前面幾行比較方便之後管理時尋找程式碼。第1行跟第2行是blogger判斷式，第1行是要讓效果只在行動版顯示，第2行是要讓效果只在文章頁面顯示。記得網址要改成自己網站相對應的網址。
三、CSS程式碼
在<head>跟</head>之間填入下面程式碼，如果熟悉CSS可以自己修改一些屬性的值，以搭配自己的網站介面設計。
四、jQuery語法
要讓視窗出現跟消失需要用到jQuery語法，一樣在<head>跟</head>間填入下面程式碼。
程式碼全部貼好之後，可以修改一下註解，改成自己喜歡的註解，這點蠻重要的，在註解中寫進幾個關鍵字，方便日後搜尋可以更快速找到目標。像我這裡用的是「浮動」這個關鍵字。之後就可以點選「儲存範本」去自己網站看看囉！
