Cara Membuat Tombol Back To Top Versi Mudah di Blogger

Baca Juga Artikel Berikut Ini

Cara membuat tombol back to top versi mudah - Selamat datang di Blog Firdaus, kali ini admin akan memberikan tutorial bagaimana cara membuat tombol kembali ke atas dan pemasangannya pada blog nantinya. Loh, bukannya sebelumnya sudah memberikan tutorial tentang hal ini?

Itu memang benar, topik yang dibahas memang sama, namun kali ini dikemas dengan cara yang berbeda. Apa yang membuatnya berbeda?

Tutorial sebelumnya : Cara Memasang Tombol Back To Top (Cara 1)

Jika di cara sebelumnya, anda harus mengutak atik edit html, tanpa untuk cara ini tidak. Anda cukup memanfaatkan fitur tata letak saja.

Banyak yang mengatakan, jika tombol back to top ini sama sekali tidak diperlukan, hanya sebagai penghias saja. Jika anda berpikiran seperti itu, maka anda salah besar.

Google justru menyukai blog yang user experience (memberikan pengalaman terbaik bagi penggunanya). Dimana letak user experiencenya?

Ketika pengunjung anda sudah selesai membaca artikel, cukup dengan mengklik tombol ini, maka dengan langsung mereka tertuju ke atas pada blog tersebut secara otomatis. Ini menguntungkan dan juga tidak merepotkan bagi pengunjung, daripada harus capek-capek scroll cukup dengan menekan tombol ini maka sudah bisa menuju ke atas, apalagi jika artikel memiliki banyak kata fitur ini sangat dibutuhkan.

Perhatian : Tombol ini dapat bekerja dengan baik jika di dalam template anda sudah terdapat jQuery. Jika tidak, bisa saja tombol ini tidak berfungsi. Untuk itu cek terlebih dahulu apakah ada jQuery pada template anda (Saya yakin untuk template jaman sekarang, mayoritas sudah dipasang)

Sebelum menuju ke penerapannya, ada baiknya back up template anda terlebih dahulu untuk berjaga-jaga jika ada kesalahan pada template nantinya.

Cara Pembuatan Tombol Back To Top di Blogger

• Silahkan buka terlebih dahulu akun blogger anda
• Langsung menuju tata letak
• Tambah gadget (bebas pilih, mau sidebar atau footer apa saja boleh)
• Pilih gadget HTML/Javascript
• Pada bagian konten isi dengan kode berikut ini :

<style>.tombol-back-to-top{position:fixed;bottom:3px;right:10px;padding:2px;display:none;cursor:pointer;text-decoration:{diplay:none}}</style>

<img class="tombol-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJWSnsW7YAXx0qjBOCFNS3L6atAaIjV71fPzAGThQv9FXD0mP_5_76LBBjmrR1moKP0rUL1HYd9ZYFJ17qUvZHZybCntGlGQWXwpCscJXO0jTX-itercmr8p33VeesqpvualI51P41zwGC/s1600/PicsArt_05-05-02.40.38-min+%25281%2529-min.png" />



<script type="text/javascript">

/*****www.firdaus.web.id***/

jQuery(document).ready(function(){var offset=250;var duration=400;jQuery(window).scroll(function(){if(jQuery(this).scrollTop()>offset){jQuery('.tombol-back-to-top').fadeIn(duration)}else{jQuery('.tombol-back-to-top').fadeOut(duration)}});jQuery('.tombol-back-to-top').click(function(event){event.preventDefault();jQuery('html, body').animate({scrollTop:0},duration);return!1})})

</script>

keterangan : ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJWSnsW7YAXx0qjBOCFNS3L6atAaIjV71fPzAGThQv9FXD0mP_5_76LBBjmrR1moKP0rUL1HYd9ZYFJ17qUvZHZybCntGlGQWXwpCscJXO0jTX-itercmr8p33VeesqpvualI51P41zwGC/s1600/PicsArt_05-05-02.40.38-min+%25281%2529-min.png dengan url gambar anda sendiri.

• Klik Simpan

Kini, tombol back to top sudah muncul pada blog anda. Jika setelah menggunakan cara ini, tidak bekerja pada blog anda, silahkan menghubungi admin.

Apa tombol ini akan memberatkan loading blog? Tentu tidak, karena kode yang telah dibagikan sudah dicompress terlebih dahulu sehingga tidak akan memberatkan loading situs anda.

Baca juga : Cara Membuat Contact Form

Bagaimana? Tertarik memasangya?

Sekian artikel tentang cara membuat dan memasang tombol back to top versi mudah di blogger yang bisa anda lakukan. Semoga tutorial ini bermanfaat bagi semua.