Cara Menambahkan Fitur Progress Scroll Bar di Blogger dengan Jelas

Cara Menambahkan Fitur Progress Scroll Bar di Blogger dengan Jelas

Bagi para pengguna blogger, tampilan blog yang menarik dan user-friendly tentunya menjadi prioritas utama. Salah satu fitur yang dapat menambah kenyamanan pengunjung saat mengunjungi blog adalah adanya progress scroll bar. Apa itu progress scroll bar? Bagaimana cara menambahkannya di blogger? Ikuti langkah-langkah berikut untuk mendapatkan fitur tersebut di blog Anda.

Apa itu Progress Scroll Bar?

Sebelum masuk ke pembahasan cara menambahkan fitur ini di blogger, mari kita ketahui terlebih dahulu apa itu progress scroll bar. Progress scroll bar merupakan sebuah garis yang muncul di bagian bawah layar saat pengunjung menggulir ke bawah atau ke atas halaman blog. Garis tersebut menandakan posisi pengunjung dalam menggulir halaman dan seberapa jauh lagi mereka harus menggulir untuk sampai ke akhir halaman. Dengan adanya progress scroll bar, pengunjung dapat melihat sejauh mana mereka telah menggulir halaman dan seberapa lama lagi proses pengguliran akan selesai.

Cara Menambahkan Progress Scroll Bar di Blogger

Untuk menambahkan progress scroll bar di blogger, Anda perlu mengikuti langkah-langkah berikut:

1. Masuk ke akun blogger Anda dan pilih blog yang ingin ditambahkan progress scroll bar.
2. Pada dashboard blogger, klik menu "Tata Letak".
3. Klik "Edit" pada bagian "Postingan Blog".
4. Pada jendela yang muncul, cari bagian "HTML/JavaScript" dan klik pada tanda plus (+) di sebelah kanan.
5. Berikan judul pada widget tersebut, misalnya "Progress Scroll Bar".
6. Salin dan tempel kode HTML berikut pada bagian "Konten" widget:

<div id='scrollbar'><div id='bar'></div></div> <style type='text/css'> #scrollbar { position: fixed; left: 0; bottom: 0; width: 100%; height: 5px; background: #ccc; z-index: 9999; } #bar { position: absolute; left: 0; top: 0; width: 0%; height: 100%; background: #000; transition: all 0.2s ease-out; } </style> <script> window.onscroll = function() { myFunction() }; function myFunction() { var winScroll = document.body.scrollTop || document.documentElement.scrollTop; var height = document.documentElement.scrollHeight - document.documentElement.clientHeight; var scrolled = (winScroll / height) * 100; document.getElementById("bar").style.width = scrolled + "%"; } </script>

Klik "Simpan" untuk menyimpan perubahan.

Lihat hasilnya dengan mengunjungi blog Anda. Progress scroll bar akan muncul di bagian bawah layar saat Anda menggulir halaman.

Penyesuaian Tampilan Progress Scroll Bar

Jika Anda ingin menyesuaikan tampilan progress scroll bar sesuai dengan warna dan gaya blog Anda, Anda dapat mengubah kode CSS pada langkah ke-6. Anda dapat mengganti warna background dan warna garis progress scroll bar sesuai dengan preferensi Anda.

Selain itu, Anda juga dapat menyesuaikan posisi dan ukuran progress scroll bar dengan mengubah nilai pada kode CSS. Misalnya, jika Anda ingin progress scroll bar muncul di bagian atas layar, ganti nilai "bottom: 0;" menjadi "top: 0;". Jika Anda ingin mengubah ukuran progress scroll bar, ganti nilai "height" pada kode CSS dengan ukuran yang diinginkan.

Kesimpulan

Dengan menambahkan progress scroll bar di blogger, pengunjung blog Anda dapat dengan mudah mengetahui sejauh mana mereka telah menggulir halaman dan berapa lama lagi proses pengguliran akan selesai. Selain itu, fitur ini juga dapat menambah tampilan blog Anda menjadi lebih menarik dan user-friendly. Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah menambahkan progress scroll bar di blogger. Selamat mencoba!

Berbagi :