Selasa, 07 Juli 2020

Cara Menyertakan Tombol Back To Top Pada Blogger

Pada suatu laman web terkadang kita melakukan scroll yang banyak hingga ke bawah halaman, lalu kita ingin kembali ke lokasi paling atas pada laman tersebut, namun kita mesti melakukan scroll kembali hingga ke atas laman, hal tersebut akan menyantap waktu dan menciptakan jari tangan pegal-pegal. Oleh alasannya itu disini kita mampu menyertakan sebuah tombol yang berfungsi untuk scroll otomatis kembali ke bab laman web atau blog paling atas. Tombol ini biasanya disebut Tombol Back To Top. Oke langsung saja kita akan menyertakan sebuah tombol Back To Top pada laman web atau blok milik kita. Tutorial kali ini akan kita coba pada blogspot. Caranya: Login Ke akun Blogger Sobat Pilih Menu Layout pada segi kiri dashboard. Setelah form Layout terbuka Kemudian Klik Pilihan Add a Gadget mirip pada gambar dibawah. Setelah jendela add gadget terbuka pilih HTML / Javascript mirip pada gambar dibawah. Maka akan timbul jendela baru untuk menambahkan instruksi HTML dan Javascript seperti pada gambar dibawah ini. Tambahkan kode dibawah ini pada bab Konten. div#page max-width: 900px; margin-left: auto; margin-right: auto; padding: 0px; .back-to-top position: fixed; bottom: 2em; right: 0px; text-decoration: none; color: #000000; font-size: 12px; padding: 0em; display: none; .back-to-top:hover text-decoration: none; Untuk bab Judul agan boleh mengisi apa saja, atau dikososngkan juga tidak problem. Maka akan terlihat mirip ini. Kemudian Klik Simpan / Save Sekarang coba anda buka halaman web anda dan kerjakan scroll, maka akan otomatis timbul tombol Back To Top pada bagian sebelah kanan bawah. Jika anda klik tombol tersebut maka halaman web akan otomatis scroll hingga ke posisi paling atas. Catatan!! Apabila Tidak terjadi apa-apa atau tombol tidak timbul, mungkin anda perlu menambahkan code JQuery pada file HTML template anda.  Caranya: Pada halaman Dashboard pilih Menu Template sebelah kiri. Klik Tombol Edit HTML seperti pada gambar dibawah. Kemudian akan muncul halaman edit code HTML blog anda. Carilah kode   Gunakan tombol Ctrl + F untuk mempercepat proses penelusuran Setelah anda menemukannya tambahkan instruksi dibawah ini sempurna diatas instruksi Kemudian klik tombol Simpan Sekarang coba buka laman wen anda kembali dan kerjakan Scroll, maka akan timbul tombol backt to top pada bagian pojok kanan bawah laman web anda.
Sumber https://aryhm76.blogspot.com


EmoticonEmoticon