Halo, para sahabat Amirs ID yang berbahagia. Kesempatan kali ini, Amirs ID akan memberikan tutorial atau tips tentang mendesain sebuah blog yaitu Cara Memasang Scrollbar Progress di Blog.
Sebelumnya apa itu scrollbar progress? Scrollbar Progress merupakan sebuah line (garis) yang memberikan gambaran atau petunjuk mengenai progress (kemajuan) pada pengunjung dalam membaca sebuah artikel di blog. Tentunya scrollbar progress tersebut sangat membantu bagi para pengunjung dalam mengetahui sudah sampai mana kemajuannya dalam membaca artikel tersebut.
Scrollbar progress yang akan kita buat tersebut terletak dibagian atas tepatnya dibawah addres bar pada browser kita. Ok, langsung saja ikuti langkah-langkah pada tutorial dibawah ini.
Cara Memasang Scrollbar Progress di Blog
1. Silahkan kalian masuk terlebih dahulu ke akun blog kalian di www.blogger.com
2. Selanjutnya, masuk ke bagian Template > Edit HTML
3. Kemudian taruh kode JavaScript di bawah ini tepat berada diatas kode </body>
<script type="text/javascript">
//<![CDATA[
//AMIRS ID | Progress Scrollbar
var bar_bg = document.getElementById("scrollbar-bg"),
body = document.body,
html = document.documentElement;
bar_bg.style.minWidth = document.width + "px";
document.getElementsByTagName("body")[0].onresize = function() {
// Update the gradient width
bar_bg.style.minWidth = document.width + "px";
}
window.onscroll = function() {
// Change the width of the progress bar
var bar = document.getElementById("scrollbar"),
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> 4. Setelah itu, carilah kode </head> dan masukkan kode CSS dibawah ini, tepat berada diatas kode </head>
<style type='text/css'>
#scrollbar {
position: fixed;
top: 0;
left: 0;
overflow: hidden;
width: 0%;
height: 4px;
z-index: 9999;
}
#scrollbar-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:#F62869;
}
</style> 5. Klik Simpan dan coba kalian lihat hasilnya dengan cara baca salah satu artikel kalian, kemudian scroll kebawah.
Demikianlah tadi tutorial Cara Memasang Scrollbar Progress di Blog, semoga bermanfaat sekian terimakasih.
EmoticonEmoticon