December 29, 2014

Cara Memasang Back to Top Blog Tanpa jQuery

December 29, 2014

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


Cara Memasang Back to Top Blog 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!

Previous
« Prev Post
Author Image

Romeltea

Recommended Posts

Related Posts

Show comments
Hide comments

4 comments on Cara Memasang Back to Top Blog Tanpa jQuery

  1. thanksss... udah saya coba dan berhasill :)

    ReplyDelete
  2. saya coba terapkan di blog saya, tapi kenapa saat sudah sampai bagian atas blog, icon back to top nya tidak hilang, tidak seperti yang ada pada blog ini ya mas bro?

    ReplyDelete
    Replies
    1. kalau yang hilang itu pake jquery, tidak murni css dan html seperti kode di atas

      Delete
  3. gan kan saya pake template yang sama nih cocok buat saya, tapi setelah kompress css dan html, selalu ada notifikasi tampilkan konten yang terlihat, punten carana gan, dan saya barusan udah coba back to top yang kedua dan langsung jadi, nuhun...

    ReplyDelete

Contact Form

Name

Email *

Message *