12/16/16

Cara Memasang Back To Top Simpel Di Blogspot Dengan Jquery

Cara Memasang Back To Top Simpel Di Blogspot Dengan Jquery

Memang di internet banyak sekali tutorial cara memasang back to top atau tombol kembali ke atas dengan style atau gaya berberbeda-beda, ada yang memakai gambar, ada yang di padukan dengan Font Awesome sebagai tombol penunjuknya dan banyak macamnya lagi.

Menurut saya, back to top atau tombol kembali ke atas bisa di masukan ke kategori penting dalam membangun sebuah blog atau pun website. Kenapa saya berpendapat begitu ? karena ini termasuk cara untuk mempermudah pengunjung blog atau website kita. Dengan adanya tombol back to top atau tombol kembali ke atas, pengunjung blog kita enggak perlu lagi men scroll mouse untuk kembali ke atas setelah membaca artikel kita. Itu menurut saya tapi mungkin menurut pandangan setiap orang akan berbeda-beda.

Silahkan Anda lihat demonya terlebih dahulu dan sekalian Anda lihat saya telah membuat pagelist atau navigasi default blogger bisa dibuat dropdown. cek disini.



Setelah anda melihat demonya, mari kita simak tutorialnya di bawah ini.

1. Pertama Anda login terlebih dahulu ke akun blogspot Anda.
2. Jangan lupa backup terlebih dahulu template Anda.
3. Klik template dan buka Edit HTML.
4. Pastika terlebih dahulu di blog anda sudah terinstal kode Jquery seperti di bawah ini. dan jika tidak ada kode jquery seperti di bawah maka silahkan anda copy pastekan kode tersebut tepat di atas, atau sebelum  </body>. Gunakan (Ctr+F) untuk memudahkan pencarian pada halaman edit HTML.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>
Kode jquery di blog Anda mungkin akan berbeda versinya ada yang 1.11.8 ada yang 2.1.3, dan masih banayak versi jquery lainnya.

5. Selanjutnya anda copy pastekan kode Jquery dibawah ini tepat sebelum atau tepat di atas kode </body>.

<script>           

 jQuery(document).ready(function() {

  var offset = 220;

  var duration = 500;

  jQuery(window).scroll(function() {

   if (jQuery(this).scrollTop() &gt; offset) {

    jQuery(&#39;.backtotop&#39;).fadeIn(duration);

   } else {

    jQuery(&#39;.backtotop&#39;).fadeOut(duration);

   }

  });

  jQuery(&#39;.backtotop&#39;).click(function(event) {

   event.preventDefault();

   jQuery(&#39;html, body&#39;).animate({scrollTop: 0}, duration);

   return false;

  })

 });

</script>

6. Setelah memasang kode Jquery di atasa selanjutnya Anda copy pastekan kode HTML di bawah ini tepat diatas kode <footer> atau bisa juga dibawah pasang sesudah kode </footer>.

<a class='backtotop' href='#' title='Back to top'>&#9650;</a>

7. Terakhir Anda copy pastekan kode CSS di bawah ini tepat di atas atau sebelum kode  ]]></b:skin> atau </style>.

.backtotop:hover {

  color: #bcb6b0 !important;

  text-decoration: none;

}

.backtotop {

  display: none;

  position: fixed;

  bottom: 1rem;

  right: 1rem;

  font-size: 1.4rem;

  color: #c4996c;

  text-decoration: none;

  text-align: center;

  cursor: pointer;

}

8. Klik Simpan/Save.
Untuk yang diberi tanda warna merah di atas pada kotak script CSS, kegunaanya untuk merubah warna back to top-nya jadi silahkan Anda rubah warnanya sesuai selera Anda.
Demikian tutorial yang bisa saya berikan mengenai Cara Memasang Back To Top Simpel Di Blogspot Dengan Jquery. Jika Anda masih mengalami kesulitan saat memasangnya gak perlu malu atau sungkan untuk menanyakannya di kolom komentar di bawah.

Apakah Anda mempunyai komentar juga mengenai pagelist default blogger, yang bisa di buat dropdown menu dan sticky navigasi ? Silahkan kasih komentar di bawah.

You might also enjoy reading

Subscribe

Daftarkan email Anda untuk mendapatkan Artikel terbaru pilihan dari Andito Blog

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Silahkan berkomentar sesuai dengan topik.