Ikuti kami di Blogger atau di Google News
...
Memasang Progress Bar di Blog

Memasang Progress Bar di Blog

Cara memasang progress bar pada blog
Memasang Progress Bar di Blog

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.

Baca juga

Advertisement

Dare to be Different!

Posting Komentar

Tuliskan pertanyaan seputar topik artikel diatas! Atau pertanyaan out of topic di .
Use this tools to convert basic comment to html characters, then copy it to comment form


image quote pre code