2015年12月21日 星期一

在 Google Blogger 中建立返回頁首之按鍵

返回頁首(Back to Top)，可以結合本站文章「在 Google Blogger 中建立下拉式選單」，可以提供高效率閱灠環境，例如下列閱灠流程：
  • 點選 MenuBar。
  • 尋找文章。
  • 閱讀文章(由上至下)。
  • 返回頁首之按鍵(快速回到 MenuBar 找尋其他文章)。
本文使用 scrollUp jQuery Plugin 來達到功能，當頁面離開下拉式選單一定距離後，會自動浮現「返回頁首」鍵。

##ReadMore##

Step1.
至 scrollUp jQuery Plugin 網站下載 scrollup-master.zip 之套件，並解壓縮之。

Step2.
參考文章「以 Google Drive 分享超連結供 Blogger 使用」，至解壓縮後的目錄之路徑：scrollup-master/dist/，將其中的 jquery.scrollUp.min.js 上傳至網路空間並取得其網址。

Step3.
上傳自己喜歡的圖示(建議 48×48 .icon 檔) 或是至解壓縮後的目錄之路徑：scrollup-master/demo/img/，將 top.png 上傳至網路空間並取得其網址。

Step4.
至 Blogger 「設計」→「範本」→「編輯HTML」→
找到 <head>...</head> ，直接在 <head> 後方加入下 Code：
<!-- scrollUp jQuery Plugin START -->
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
    <!-- scrollUp jQuery plugin -->
    <script src='https://googledrive.com/host/0BxEiZ5gd9umbd09LMENDcGh1NXc' type='text/javascript'/>

    <script>
    $(function () {
      $.scrollUp({
        scrollImg: true // Set true to use image
      });
    });
    </script>
<!-- scrollUp jQuery Plugin END -->
其中，第 4 行之 src=... 請改成 Step2. 檔案 jquery.scrollUp.min.js 網址。

Step5.
至 Blogger 「設計」→「範本」→「編輯HTML」→
找到<b:skin>...</b:skin>，直接在 ]]></b:skin> 前方加入下 Code：
/********** scrollUp jQuery Plugin START **********/
#scrollUp {
  bottom: 20px;
  right: 20px;
  height: 64px;  /* Height of image */
  width: 64px; /* Width of image */
  background: url(https://googledrive.com/host/0BxEiZ5gd9umba1haeG5oY2d1OTQ) no-repeat;
}
/********** scrollUp jQuery Plugin END **********/
其中，第 7 行之 url(...) 請改成 Step3. 之圖示網址。



於
標籤：