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 jalantikus menerapkan efek tersebut, jika kita melakukan scroll kebawah maka tepat diatasnya akan menampilkan progressbar sejauh mana kta scroll artikelnya.
Lihat Juga : Membuat Scroll Bar Blog Berwarna-warni
Efek animasi saat scroll blog kebawah dan memunculkan garis horizontal di atas blog kita ini bisa di terapkan di blogger.
Scroll progress bar ini juga dapat mempercantik tampilan saat blog di scrool, dan juga dapat membantu pengunjung untuk mengetahui sejauh mana mereka telah membaca artikel anda.
Pasang scrollbar progress ini sangat rekomendasi buat blog-blog dengan artikel panjang.
Berikut tutorialnya
Memasang progress bar saat artikel di scroll
1. Masuk Blogger > Tema > Edit HTML
2. Carilah kode ]]></b:skin> atau </style>
3. Copy code CSS dibawah dan letakkan disalah satu tag yang kita cari tadi tepat diatas tagnya.
/* Kenscripts.blogspot.com */
#scroll-progress-kenscripts { position: fixed; top: 0; left: 0; width: 0%; height: 10px; overflow: hidden; z-index: 99999; }
#scroll-progress-kenscripts-ken { width: 100%; height: 100%; position: absolute; background:#2a00ff; }
4. Lalu letakkan kode HTML dibawah ini tepat di bawah tag <body>
<div id="scroll-progress-kenscripts">
<!-- Kenscripts.me -->
<div id="scroll-progress-kenscripts-ken"></div>
</div>
5. Kemudian carilah kode </body> dan letakkan kode Javascript dibawah ini tepat diatas tag </body>
<script>
//<![CDATA[
var bar_ken = document.getElementById("scroll-progress-kenscripts-ken"),
body = document.body,
html = document.documentElement;
window.onscroll = function() {
var bar = document.getElementById("scroll-progress-kenscripts"),
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>
6. Done
Catatan : Gantilah warna #2a00ff sesuai keinginan anda.
Lalu ubahlah tinggi scroll barnya dengan mengganti nilei height: 10px.
Sekian tutorial memasang scrollbar progress pada blogger.
Maaf jika ada salah kata, Terima kasih telah berkunjung.
Demo