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.
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.
Baca Juga
- Top 10 Website Dofollow 2015 untuk Backlink Gratis Blog
- Mengganti Link Posting Lama, Beranda, dan Posting Baru Menjadi Judul
- Teknik SEO On-Page untuk Meningkatkan Pengunjung Blog
- Cara Menghapus Widget Bundle CSS untuk Fast Loading Blog
- Pengertian & Tips Hindari Google Sandbox
- Mengganti Link Newer Post, Home, Older Post dengan Judul Posting
- Mengatasi Remove Render-Blocking JavaScript untuk Loading Blog
- Mempercantik Tampilan Numbered List Posting Blog
- Cara Mengubah Warna Judul Blog
- Cara Memunculkan Jumlah Komentar Lebih dari 200 di Posting Blog
- Mengatasi Reply Comment (Balas Komentar) Tidak Berfungsi di Blogger
- Cara Termudah Membuat Tabber Tab di Sidebar Blogger
- Cara Setting SEO Dashboard Blogger ala Contoh Blog
- Cara Membuat Contact Form di Halaman Statis Blog
- Cara Membuat Daftar Isi Blog Berdasarkan Label Pilihan Sendiri
- Dapatkan Uang dari Video yang Anda Upload di Akun Youtube Anda
- Kebijakan Konten Blog yang WAJIB Diketahui Para Blogger
- Cobalah Pelan-Pelan Ikuti Tutorial Blog Yang Kami Tampilkan
- Gara-gara Blogger, Pria Satu Ini Masuk Nominasi Liputan6 Awards 2015 SCTV
- Top 10 Posting Terbanyak Dibaca di Blog CB
<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/AVvXsEibhHLfJJsLFwBOfOFs2aWHQgYgBwKQ_TO9qUdztyBfvATDCagRbeCwU88qZ9XF7TNfjWfXm8US5LpoKuaq2YuAmj-m2sdym2lzQqrfJv2xHL8mCVJxI_Fd4xegjCOp1wh8cM8sjHBT1Is/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='#'> ↑ </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>
<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!
