Tanpa kalian sadari mungkin sering melirik bagian atas halaman ini. Ada warna yang berjalan ketika kalian menggulir halaman. Benar sekali namanya adalah Progreas Bar.
Apa itu Progress Bar?
Progress Bar adalah penanda dari ukuran panjang sebuah artikel yang ada pada halaman.
Posisinya berada dibagian atas antara header dan address bar, itu kenapa dinamakan progress bar. Jika discroll kebawah progressnya akan bertambah pun sebaliknya.
Perlukah memasang Progress Bar?
Memasang Progress Bar berguna untuk menunjukkan pembaca berapa banyak artikel yang tersisa untuk dibaca, ini akan mendorong pengunjung untuk terus membaca artikel Kalian sampai selesai.
Pentingnya memasang Progress Bar
Progress Bar menambahkan pengalaman user interface pembaca dan juga mendorong pembaca untuk menggulir ke bawah. Ini juga memotivasi pembaca untuk menyelesaikan artikel yang sedang dibaca.
Bagaimana cara memasang Progress Bar
Oke kalau kalian sudah penasaran dengan cara memasangnya dan bagaimana penampakanya kalau ada di blog kalian, langsung saja kita ke tutorialnya.
Cara memasang Progress Bar di Blogger
Progress bar ini bisa dipasang disemua web bukan hanya diblogger, untuk pengaplikasian selain blogger silahkan disesuaikan sendiri penempatanya.
Sebelum melanjutkan saya sarankan kalian melakukan backup template terlebih dahulu menghindari jika ada error.
Silahkan Masuk ke Dashboard Blogger pilih Tema kemudian Backup dan Download .
Jika sudah mari kita lanjutkan cara memasang Progress Bar blogger
Cara memasang Progress Bar di Blog
Pada Dashboard Blogger pilih Tema kemudian Edit HTML. Salin Kode CSS dibawah Ini Dan Letakan Di Atas ]]></b:skin>
/* Progress Bar kuymase.com */
.km-progress-bar{background-color:#009ee0;position:fixed;top:0;left:0;z-index:999;width:0%;height:4px;}
Bagian yang saya tandai bisa kalian ubah dan sesuaikan sesuai tema atau selera kalian
Selanjutnya salin semua kode dibawah ini dan letakan di atas kode </body>.
<div class="km-progress-bar" id="km-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("km-progressbar").style.width=scrolled+"%"}
//]]>
</script>
Jika sudah silahkan simpan/save template kalian dan lihat hasilnya.
Sekarang kalian sudah bisa memasang Progress Bar di Blog. jika ada pertanyaan jangan ragu tuliskan komentar kalian.