Mungkin diantara anda pernah berkunjung ke suatu situs yang menggunakan progress scrollbar yang berada di bagian atas situs mereka apabila anda melakukan scroll kebawah. Nantinya, akan muncul sebuah garis horizontal dengan efek layaknya seperti loading pada situs, apabila anda melakukan scrolling kebawah maka garis scrollbar ini akan bergerak ke kanan, begitu pula sebaliknya. Jika anda melakukan scroll ke atas, maka garis scrollbar ini akan bergerak ke kiri.
Apabila anda memiliki artikel yang cukup panjang, mungkin dengan menggunakan Progress Scrollbar akan mempercantik blog anda sehingga pengunjung menjadi lebih nyaman serta mengetahui sudah sampai mana artikel yang telah dibaca oleh pengunjung anda.
Nah, karena banyaknya peminat untuk memasang progress scrollbar pada blog. Pada kesempatan kali ini saya akan memberikan tutorial mengenai cara membuat progress scrollbar dengan gradasi warna pada blog. Oh iya, perlu diingatkan bahwa progress scroll bar yang akan saya berikan berikut pure menggunakan Javascript yang dipadukan dengan CSS. Tentu, itu akan membuat loading blog anda agak sedikit menurun kecepatannya.
Jika anda sudah siap dengan resiko yang akan didapat, maka anda bisa langsung mengikuti langkah-langkah yang akan saya berikan dibawah ini. Untuk warna dari progress scrollbar ini tentunya anda bisa rubah sesuai dengan warna gradasi favorite anda serta bisa juga diubah menjadi satu warna saja.
Cara Membuat Progress Scrollbar dengan Gradasi Warna di Blog
Alangkah baiknya untuk mengikuti artikel berikut ini secara teliti agar tidak terjadi kesalahan pada proses penerapannya, sebaiknya back-up template anda terlebih dahulu untuk menjaga-jaga apabila ada kesalahan pada saat anda menerapkan progress scrollbar ini pada template anda.
- Masuk ke akun Blogger anda masing-masing.
- Setelah masuk ke akun blogger, langkah selanjutnya anda bisa klik Tema pada dashboard blogger » selanjutnya Edit HTML.
- Jika sudah masuk ke dalam menu Edit HTML, maka anda sudah bisa klik sembarang lalu tekan dan tahan CTRL + F untuk mencari kode
]]></b:skin>atau</style>dan letakkan kode dibawah ini sebelum atau diatas kode tersebut.
/* Progress Scrollbar by mahes.web.id */
#top-scrollbar {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
overflow: hidden;
z-index: 99999;
}
#top-scrollbar-bg {
width: 100%;
height: 100%;
position: absolute;
background:linear-gradient(45deg, #5E64EE, #5EEE66);
}
- Selanjutnya tambahkan kode javascript dibawah ini tepat diatas 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>
- Lalu tambahkan lagi kode html dibawah ini tepat dibawah kode
<body>
<div id="top-scrollbar">
<div id="top-scrollbar-bg">
</div>
</div>
- Simpan Tema.
- Jika anda ingin mengganti warna pada gradasi scrollbar ini, maka ganti kode warna
#5E64EEdan#5EEE66yang sudah saya tandai diatas dengan menggunakan Color Picker. - Apabila anda ingin menggunakan satu warna saja, maka hapus kode
background:linear-gradient(45deg, #5E64EE, #5EEE66);kemudian ganti dengan kode berikutbackground:#2967E3;dan rubah kode#2967E3menjadi sesuai dengan warna yang anda inginkan dengan bantuan Color Picker. - Anda juga bisa merubah posisi progress scrollbar yang awalnya diatas menjadi dibawah dengan mengganti kode
top: 0;menjadibuttom: 0;
Itulah tutorial kali ini mengenai cara membuat progress scroll bar menggunakan gradasi warna yang bisa anda terapkan pada blog anda. Jika ada pertanyaan mengenai artikel diatas, silahkan komentar pada kolom yang sudah disediakan dan tentunya akan dibantu sesuai dengan kemampuan saya. Selamat mencoba!
