Cara Memasang Scroll Indicator di Blog

Cara Memasang Scroll Indicator di Blog - Menjalankan blog, situs, dan website tentu bukan perkara mudah. Selain harus membagikan informasi yang bermanfaat, kita juga diharuskan memperhatikan tampilan halaman hingga optimasi SEO.

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

Ada banyak sekali fitur serta layanan yang disediakan untuk menunjang tampilan halaman yang terbaik, salah satunya yaitu scroll indicator atau yang biasa disebut dengan Progress Bar.

Rekomendasi: Apa itu Shared Hosting dan Cloud Hosting?

Apa itu Scroll Indicator?

Scroll indicator adalah fitur yang berguna untuk menampilkan persentase sejauh mana pembaca telah menggeser halaman. Fitur tersebut akan bergerak mengikuti geseran yang dilakukan oleh pembaca.

Nah saat ini, ada dua jenis tampilan yang paling sering digunakan, yaitu berupa baris horizontal dan persentase angka. Namun di artikel kali ini, kita hanya akan belajar tentang pemasangan yang versi horizontal.

Jika masih bingung, berikut adalah contoh dari scroll indicator tersebut:

Demo

Rekomendasi: Cara Memasang Related Post Manual di Blog

Cara Memasang Scroll Indicator di Blog

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

/* Scroll Indicator by www.ferisp.com */
.scrinContainer{position:fixed;width:100%;height:5px;background:#fafafa;top:0;left:0;z-index:999}
.scrinLight{width:0%;height:5px;background:#009ee0}

• Tempel di atas </body>:

<div class="scrinContainer">
  <div class="scrinLight" id="scrinInput"></div>
</div>
<script>
window.addEventListener("scroll",scrinFunction);function scrinFunction(){var winScroll=document.body.scrollTop||document.documentElement.scrollTop;var height=document.documentElement.scrollHeight-document.documentElement.clientHeight;var scrolled=(winScroll/height)*100;document.getElementById("scrinInput").style.width=scrolled+"%"}
</script>

• Pilih SIMPAN
• Selesai.

Penutup

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

Tapi jika blog Anda tidak menggunakan banyak widget, maka fitur ini jelas menarik untuk digunakan.

Rekomendasi: Cara Memasang Syntax Highlighter Keren dan Berwarna di Blog

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