Pernahkah kalian melihat website yang mana saat kita baca artikelnya dan scrool ke bawah akan menampilkan efek progress dibagian atas atau samping websitenya.
Sebagai contoh Youtube menerapkan efek tersebut, jika kita melakukan scroll kebawah maka tepat diatasnya akan menampilkan progressbar sejauh mana kta scroll artikelnya.
Efek animasi saat scroll blog kebawah dan memunculkan garis horizontal di atas blog kita, ini bisa di terapkan pada blogger.
Scroll progressbar ini juga dapat mempercantik tampilan saat blog di scrool, dan juga dapat membantu pengunjung untuk mengetahui sejauh mana mereka telah membaca artikel kamu.
Pasang scrollbar progressbar ini sangat rekomendasi buat blog-blog dengan artikel yang panjang. Berikut tutorialnya dibawah.
Cara Pasang Script ProgressBar Pada Blogger
- Masuk Blogger Tema, Edit HTML
- Cari kode ]]></b:skin> atau </style>
- Copy code CSS dibawah dan letakkan disalah satu tag yang kita cari tadi tepat diatasnya.
- Lalu letakkan kode HTML dibawah ini tepat di bawah tag <body>
- Kemudian cari kode </body> dan letakkan kode Javascript dibawah ini tepat diatas tag </body>
- Sampai tahap ini pemasangan kode script progressbar telah selesai, kemudian silahkan kamu pilih simpan perubahan template
/* ProgressBar */
#scroll-progress-blogkuscript { position: fixed; top: 0; left: 0; width: 0%; height: 10px; overflow: hidden; z-index: 99999; }
#scroll-progress-blogku-script { width: 100%; height: 100%; position: absolute; background:#2a00ff; }<div id="scroll-progress-blogkuscript"> <!-- BLOGKU TUTORIAL --> <div id="scroll-progress-blogku-script"></div> </div>
<script>
//<![CDATA[
var bar_ken = document.getElementById("scroll-progress-blogku-script"),
body = document.body,
html = document.documentElement;
window.onscroll = function() {
var bar = document.getElementById("scroll-progress-blogkuscript"),
dw = document.documentElement.clientWidth,
dh = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight ),
wh = window.innerHeight,
pos = pageYOffset || (document.documentElement.clientHeight ?
document.documentElement.scrollTop : document.body.scrollTop),
bw = ((pos / (dh - wh)) * 100);
bar.style.width = bw + "%";
}
//]]>
</script>Note :
Silahkan ganti warna #2a00ff sesuai keinginan kamu. Lalu rubah tinggi scroll barnya dengan mengganti nilai height: 10px.
Jika ada yang kurang mengerti dengan uraian postingan ini silahkan berikan masukan atau tanyakan pada kolom komentar dibawah.