Cara Menciptakan Tombol Back To Top Versi Gampang Di Blogger

Baca Juga

Cara menciptakan tombol back to top versi gampang - Selamat tiba di , kali ini admin akan memperlihatkan tutorial bagaimana cara menciptakan tombol kembali ke atas dan pemasangannya pada blog nantinya. Loh, bukannya sebelumnya sudah memperlihatkan tutorial ihwal 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, jikalau tombol back to top ini sama sekali tidak diperlukan, hanya sebagai penghias saja. Jika anda berpikiran menyerupai 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 final membaca artikel, cukup dengan mengklik tombol ini, maka dengan eksklusif 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 sanggup menuju ke atas, apalagi jikalau artikel mempunyai banyak kata fitur ini sangat dibutuhkan.

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

Sebelum menuju ke penerapannya, ada baiknya back up template anda terlebih dahulu untuk berjaga-jaga jikalau 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 bab konten isi dengan isyarat 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/AVvXsEjb-ODXbdkbnRJwo_b-PeXyi3A0lOm8svikWo_W3KN6jnSxqEGnzOOyQ1RB6kRITFAcWO-zyakDW1ctiKIjKGAyDdAERVxkP6GFUZSX9xsDMccnPLjyvzUZrVELUsQTicXma82t3cyvsI9b/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/AVvXsEjb-ODXbdkbnRJwo_b-PeXyi3A0lOm8svikWo_W3KN6jnSxqEGnzOOyQ1RB6kRITFAcWO-zyakDW1ctiKIjKGAyDdAERVxkP6GFUZSX9xsDMccnPLjyvzUZrVELUsQTicXma82t3cyvsI9b/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 sehabis memakai cara ini, tidak bekerja pada blog anda, silahkan menghubungi admin.

Apa tombol ini akan memberatkan loading blog? Tentu tidak, alasannya isyarat 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 ihwal cara menciptakan dan memasang tombol back to top versi gampang di blogger yang sanggup anda lakukan. Semoga tutorial ini bermanfaat bagi semua.