Top

Blogger行動版小元件 - 頁面底端提示框

| 作者

1. 網站行動版頁面下方的提示框,
示範頁面,用手機打開或是縮放視窗檢視效果

這次的小元件也是受到一些網站啟發而設計的,特別專注在行動版頁面(或是說手機版頁面)。越來越多人使用手機瀏覽網頁是一個無法回頭的趨勢,說不定正在看這篇文章的你就是用手機在看呢!手機王的行動版網站是我第一個看到這個功能的地方,它的行動版頁面當你在往上滾動頁面,下方會浮現按鈕框,可以進去範例頁面試玩看看。


這個功能其實在Facebook或是Google+app中也有,回想一下就會知道我在說什麼。基本的想法大概是這樣的,在手機介面狹長的滾動頁面中,當隨著不斷往下閱讀內容後,但是又還沒到達頁面底端時,這時讀者不想繼續看了(往下滾動頁面),他能夠做的有兩個動作:

        1.關掉頁面:這個時候只能說掰掰了
        2.往上滾動頁面:那這表示你的網站還有機會留住讀者


沒錯這時候就是要利用讀者往上滾動頁面時提供一些選項可以點擊,降低跳出率,並且能夠增加網站停留時間,「網站停留時間」的數據應該是很多部落格版主非常在意的,好的內容跟網站能夠讓讀者停留較久的時間,也表示讀者更有可能投入和網站的互動中。所以這次幫blogger加入了這個功能。以下一樣是程式碼的部分,小地方可以照自己的網站性質去做調整。(強烈建議在修改blogger範本前事先備份範本)



一、載入jQuery

<head></head>之間填入下面程式碼,如果網站已經有載入lazyload之類的函式庫,建議可以把語法貼在一起,比較方便管理。另外建議之前就有載入過jQuery函式庫的把它換成下面的新版,效果支援度會比較高。




二、HTML程式碼

<body></body>間填入下面程式碼,最好是放在<body>後面幾行或是</body>前面幾行比較方便之後管理時尋找程式碼。第1行跟第2行是blogger判斷式,第1行是要讓效果只在行動版顯示,第2行是要讓效果只在文章頁面顯示。記得網址要改成自己網站相對應的網址。



三、CSS程式碼

<head></head>之間填入下面程式碼,如果熟悉CSS可以自己修改一些屬性的值,以搭配自己的網站介面設計。




四、jQuery語法

要讓視窗出現跟消失需要用到jQuery語法,一樣在<head></head>間填入下面程式碼。



程式碼全部貼好之後,可以修改一下註解,改成自己喜歡的註解,這點蠻重要的,在註解中寫進幾個關鍵字,方便日後搜尋可以更快速找到目標。像我這裡用的是「浮動」這個關鍵字。之後就可以點選「儲存範本」去自己網站看看囉!