讓 Blogger 文章無限捲動 (Infinite Scrolling) 的方法

無限捲動 (Infinite Scroll) 又稱自動換頁(Auto Pagination)或自動載入,是社群媒體網站常見的功能,如 Facebook、 Twitter 或 Google 圖片搜尋那樣,讓使用者不必按下一頁即可自動載入接下來的內容,接下來將教你如何在 Blogger 中實做這項功能。

本篇教學的程式碼來自 Add Infinite Scrolling To Blogger 這篇文章。



安裝程式碼

首先來到 版面配置 > 新增小工具 頁面中,增加一個 HTML/JavaScript 的小工具,貼入以下程式碼。

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>

<script type='text/javascript' src='//m-misc.appspot.com/js/blogger-infinite-scrolling.js'></script>

<!--習翠近平熊維尼-->


blogger 無限捲動 程式碼 安裝 HTML 小工具


存檔之後,你的 Blog 就能無限捲動向下閱讀了。


手機也能無限捲動

雖然安裝好後立即就能在電腦版(Desktop)看到成果,但如果希望手機版(Mobile)也能有相同的無限捲動效果的話,就必須進入 主題 > 自訂 > 編輯 HTML 中修改程式碼了。

進入 編輯 HTML 後,搜尋剛剛新增的小工具,來到該項程式碼的位置。並在小工具中新增一項名為 mobile='yes' 的參數

<b:widget id='HTML1' locked='false' mobile='yes' title='' type='HTML'>

blogger 無限捲動 程式碼 新增 修改 手機版也能捲動


存檔後,手機版的頁面也能無限捲動了。



留言