petrussiahaan.com - Progress Scrollbar Warna Gradasi di Blogger - Dalam Desain Blog yang menarik, setiap detail kecil dapat membuat perbedaan. Salah satu elemen yang sering diabaikan adalah scrollbar. Meskipun jarang menjadi fokus utama, memperbarui tampilan scrollbar pada blog Anda dapat meningkatkan pengalaman pengguna secara keseluruhan.
Dalam artikel ini, kami akan menjelaskan Cara Membuat Progress Scrollbar Warna Gradasi di Blogger Anda, sehingga memberikan sentuhan estetika yang menarik.
Progress Scrollbar Warna Gradasi di Blogger
1. Pertama sobat mebuka Dasbor Blog >> Tema >> Edit HTML
2. Kemudian Salin kode CSS yang dibawah dan Masukkan kodenya tepat diatas kode ]]></b:skin> atau </style>
#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);
}3. Tambahkan Kode Javascript 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>4. Lalu tambahkan kode dibawah ini tepat dibawah <body>
<div id="top-scrollbar">
<div id="top-scrollbar-bg">
</div>
</div>5. Untuk yang Terakhir Silahkan sobat Simpan Tema
- Apabila ingin mengganti warna ganti kode warna #5E64EE dan #5EEE66 lalu kamu bisa menggunakan tool Color Picker untuk memilih warna.
- Jika menggunakan satu warna hapus kode background:linear-gradient(45deg, #5E64EE, #5EEE66); ganti jadi background:#2967E3.
- Bagi yang menggunakan sticky menu navigasi, untuk ATUR letak progress scrollbar bisa atur letak tinggi kode top: 0; menjadi top: 45px;
- Untuk yang mau mengubah posisi tempat progress scrollbar jadi di bawah tinggal ganti kode top: 0; menjadi bottom: 0;
Progress Scrollbar Warna Gradasi di Blogger dapat memberikan sentuhan estetika yang menarik dan meningkatkan pengalaman pengguna. Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah membuat progress scrollbar dengan warna gradasi yang sesuai dengan gaya dan tema blog Anda. Jangan takut untuk bereksperimen dengan kombinasi warna yang berbeda dan temukan tampilan yang paling cocok untuk blog Anda.
