Cara Memasang Back to Top Blog Tanpa jQuery

Baca Juga

Cara Membuat Tombol "Back to Top" di Blog Blogspot murni CSS + HTML, Tanpa jQuery!

KEBANYAKAN tutorial membuat tombol "Kembali ke Atas" (Bact to Top button) menggunakan jQuery alias JavaScript. Pengaruhnya, selain "ribet" pasangnya, adalah memperlambat loading blog.

Dampak lainnya jika pake jQuery adalah terjadi "bentrok" atau "konflik" antara javascript, jika lupa menghaspus salah satu jquery. Intinya, gak banget deh!

CB juga termasuk yang share tentang back to top yang pake jQuery. Kini tips tersebut gak lagi berlaku! Ganti dengan kode "Back to Top" yang murni CSS+HTML, tanpa JavaScript.

Kode "Back to Top" yang ini jelas SEO Friendly dan bisa dibilang tidak ada pengaruhnya terhadap loading blog. Artinya, blog tetap loading cepat, tidak diperlambat dengan kode "Back to Top" ini.

BUAT APA?
Buat apa ada "Back to Top" di blog? Ini menyangkut UX alias User Experience. Mempermudah user kembali ke bagian atas halaman blog tanpa perlu scroll.

Tombol "Back to Top" bagian dari upaya agar blog kita user friendly, bikin nyaman dan mudah pengunjung. Itulah sebabnya tombol "kembali ke atas" ini menjadi salah satu "trending" dalam desain situs web dan/atau template blog.

"Back to Top" Tanpa jQuery
CB juga sudah pasang tombol ini, tanpa jQuery. Ini kodenya, sudah seo friendly dan fast loads. Cara pasangnya juga gak mesti masuk ke template > edit HTML.

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img alt="kembali ke atas" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoat66Koe6qXekGTE22Ysq899NLXgIkBCmQxPw24onPWxHEmGrVPP4Y3nB5i9UsTN7NCQiO4dA1OwzlL7CXVTeqxZhqr-i3oyhYViZmyNGY0Jd0WwhluxKH7oXuoMKj2I7wE-TJPitr7o/s1600/back+to+top.png "/></a>

Yang warna merah itu link gambar atau icon back to topnya. Bisa diganti. Lihat di posting sebelumnya.

CARA PASANGNYA:
1. Layout > Add a Gadget > pilih Javascript/HTML
2. Copas kode di atas di bagian content/isi.
3. Save! Beres da ah...!!!

KODE LAINNYA
Kode berikut ini sama bagus dan seo friendly. Tanpa jQuery juga. CB modif dari kode yang di-share blog MS2. Cara pasangnya agak ribet dikit sih, tapi hasilnya lebih wusss!!! Lebih kenceng karena tanpa url image.

1. Template > Edit HTML
2. Copas kode berikut ini tepat di atas kode </body> (lihat bagian template paling bawah banget!)

<span class='back-to-top'><a href='#'> &#8593; </a></span>
<span class='back-to-top-a'><a href='http://contohblognih.blogspot.com/'>CB</a></span>
<style>
.back-to-top {position: fixed ;bottom:20px;right:10px;z-index:9999999}
.back-to-top-a {font-size:10px;z-index:9999999;opacity:0.2;position:fixed;bottom:0;}
.back-to-top a {font-size: 30px ;background-color: #DD3434 ;color:#FFF;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;padding:12px 18px 20px;text-decoration: none}.back-to-top a:hover {background-color: #272727 ;text-decoration: none}
</style>

Note! Ganti http://contohblognih.blogspot.com/ dengan alamat blog Anda.

3. Save Template!

Itu dua dua kode tombol "kembali ke atas" (back to top button) seo friendly & fast loasing, murni CSS+HTML tanpa javascript --user friendly & aman bagi loading blog! Good Luck!