Cara Membuat Scrollbar Berwarna Pada Blog Terbaru
February 18, 2019
Scrollbar merupakan sebuah garis berwarna yang digunakan untuk memberikan petunjuk kepada pembaca. Scrollbar biasanya berbentuk sebuah garis horizontal berwarna di atas ataupun dibawah postingan. Scrollbar akan bergerak mengikuti arah saat blog discroll ke bawah ataupun ke atas.
1. Buka halaman Blogger > Template > Klik tombol Edit HTML > Tambahkan kode di bawah ini sebelum kode ]]></b:skin> atau </style>
2. Tambahkan kode javascript ini berikut sebelum kode </body>
3. Kemudian tambahkan kode ini di bawah kode <body>
4. Simpan dan berikut hasilnya
Bagi teman-teman yang ingin mempercantik tampilan blog, Scrollbar ini sangat cocok untuk Anda gunakan, namun perlu diingatkan, progress scrollbar ini menggunakan javascript yang akan sedikit menambah beban loading blog Anda.
Pada Progress scrollbar ini sudah saya atur letaknya di bawah address bar pada browser. Saya juga menggunakan Progress scrollbar ini untuk membuat tampilan blog yang saya gunakan terlihat lebih cantik. Jika Anda tertarik untuk memasangnya, silahkan ikuti langkah-langkah berikut ini.
Cara Membuat Scrollbar Berwarna Pada Blog
1. Buka halaman Blogger > Template > Klik tombol Edit HTML > Tambahkan kode di bawah ini sebelum kode ]]></b:skin> atau </style>
/* Progress Scrollbar */
#top-scrollbar {
position: fixed;
top: 60px;
left: 0;
width: 0%;
height: 3px;
overflow: hidden;
z-index: 99999;
max-width: 100%;
}
#top-scrollbar-bg {
width: 100%;
height: 100%;
position: absolute;
background:#49ACE1;
box-shadow: 0 0 10px rgba(0, 136, 255, 0.7);
}2. Tambahkan kode javascript ini berikut sebelum kode </body>
<script>
//<![CDATA[
var bar_bg = document.getElementById("top-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("top-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>3. Kemudian tambahkan kode ini di bawah kode <body>
<!-- Progress Scrollbar -->
<div id='top-scrollbar'>
<div id='top-scrollbar-bg'>
</div>
</div>4. Simpan dan berikut hasilnya
Apabila teman-teman kurang paham tentang artikel yang saya bagikan, silahkan berkomentar atau hubungi saya melalui form yang sudah saya sediakan. Sekian dari saya, Terima Kasih :(
