2015年10月9日 星期五

在Blogger裡加上Back to Top按鈕


1.到 scrollUp jQuery Plugin 網站下載Plugin,或直接從這下載



2.將jquery.scrollUp.min.js放到自己的Google雲端硬碟,然後取得這個檔案的連結網址

  • 先到雲端硬碟裡找到這個檔案,在檔案上按右鍵選共用
  • 在"擁有存取權的使用者"右邊按"變更",選"開啟-公開在網路上"
  • 儲存
  • 複製上面的共用連結(長的像這樣https://drive.google.com/file/d/0Bz3l7GOrn1j5UV123mRlc1lWTjA/view?usp=sharing)
  • 將紅色的部份放到https://googledrive.com/host/後面,變這樣https://googledrive.com/host/0Bz3l7GOrn1j5UV123mRlc1lWTjA


3.將上一步得到的網址修改到下面script藍色的部份
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<!-- scrollUp jQuery plugin -->
<script src="https://googledrive.com/host/0Bz3l7GOrn1j5UV123mRlc1lWTjA" type="text/javascript"></script>

4.將上一步的script程式碼放到Google範本的HTML原始碼的</head>之前

5.將Back to Top按鈕的圖片上傳到網路空間,將圖片網址修改到下面CSS的藍色部份
/* Image style */
#scrollUp {
  bottom: 20px;
  right: 20px;
  height: 38px;  /* Height of image */
  width: 38px; /* Width of image */
  background: url(http://2.bp.blogspot.com/--EgHE5Oau7o/UpsYYWRE8YI/AAAAAAABQE8/l6arzEsDIeQ/s1600/top.png) no-repeat;
}

6.將下面這段Script放到Google範本的HTML原始碼的</body>之前
<script>
$(function () {
  $.scrollUp({
    scrollImg: true // Set true to use image
  });
});
</script>

這樣就完成了

沒有留言:

張貼留言