Cara Memasang Scroll Indicator di Blog

Cara Memasang Scroll Indicator di Blog - Menjalankan blog, situs, dan website tentu bukan perkara yang mudah. Selain harus memberikan informasi yang bermanfaat, seorang blogger juga wajib untuk memperhatikan kualitas halaman.

Hal tersebut dilakukan agar pengunjung dapat membaca artikel yang kita bagikan dengan mudah dan nyaman.

Ada banyak sekali fitur, widget, dan plugin yang disediakan untuk menunjang tampilan halaman yang terbaik. Salah satunya adalah Scroll Indicator atau Indikator Skrol.

Apa itu Scroll Indicator?

Scroll indicator adalah fitur yang berguna untuk menampilkan sejauh mana pembaca telah menggeser halaman.

Saat pembaca tersebut melakukan penggeseran, maka scroll indicator tersebut juga akan bergerak.

Pada dasarnya, ada dua jenis tampilan yang sangat sering digunakan, yaitu berupa baris horizontal dan persentase angka. Namun di artikel kali ini, kita hanya akan belajar tentang yang versi baris horizontal.

Cara Memasang Scroll Indicator di Blog

• Masuk ke BLOGGER
• Pilih menu TEMA
• Pilih EDIT HTML
• Tempel di atas ]]></b:skin>:

.progress-container {width:100%;height:7px;background:#fff;position:fixed;top:0;left:0;z-index:9999}
.progress-bar {height:7px;background:#009ee0;width:0%}

• Tempel di atas </body>:

<div class="progress-container">
  <div class="progress-bar" id="progressbar"></div>
</div>

<script>
//<![CDATA[
window.addEventListener("scroll", 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("progressbar").style.width = scrolled + "%";
}
//]]>
</script>

• Pilih SIMPAN
• Selesai.

Demo

Silahkan menggeser halaman ke atas dan ke bawah untuk melihat pergerakan.

Penutup

Selain manfaat yang telah saya sebutkan, tentu juga ada kekurangan yang perlu diketahui. Kekurangan tersebut seperti loading halaman yang menjadi lebih lambat dan lama. Jadi saran saya, gunakan fitur ini jika memang diperlukan.

Tapi apabila website Anda hanya menggunakan sedikit widget, fitur ini jelas menarik untuk diterapkan.

Cukup sekian artikel tentang Cara Memasang Scroll Indicator di Blog ini, Terima kasih.