Cara Memasang Scroll Indicator di Blog

GEMA.MY.ID

Tuesday, January 19, 2021

Scroll Indicator 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>:

.scrinContainer{position:fixed;width:100%;height:5px;background-color:#fafafa;top:0;left:0;z-index:999}
.scrinLight{width:0%;height:5px;background-color:#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 wijet, 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.

Cancel