Ada beberapa situs yang menambahkan Cara Membuat Progress Scrollbar dengan Warna Gradasi di Blog di bagian atas website atau blog ketika halaman tersebut di scroll ke bawah.
Akan muncul sebuah garis horizontal dengan efek seperti sedang loading, ketika kita scroll ke bawah maka garis tersebut akan bergerak ke kanan, dan ketika kita scroll ke atas garis tersebut akan bergerak ke kiri.
Ini disebut dengan progress scrollbar, yang berfungsi untuk memberitahu sampai dimana kita sedang berada pada halaman tersebut.
Pada postingan sebelumnya saya juga pernah membuat artikel tentang cara membuat persentase pada scrollbar blog.
Tidak jauh beda dengan itu, hanya saja untuk tutorial kali ini tidak ada angka yang menunjukan sampai dimana kita berada pada halaman website atau blog.
Semakin ke bawah progress scrollbar ini akan semakin bergeser ke kanan, dan ini juga bisa disebut dengan indikator scrollbar progress karena ini bisa memberitahu kita ketika berada di dalam blog.
Untuk website atau blog yang memiliki artikel atau postingan yang panjang atau yang memiliki banyak komentar pasti dalam satu halaman akan butuh beberapa kali scroll untuk bisa sampai ke bawah, progress scrollbar ini bisa memberitahu Anda sampai dimana Anda berada pada halaman tersebut.
Scrollbar progress ini sangat cocok untuk Anda yang ingin mempercantik blog Anda, namun perlu saya ingatkan bahwa progress scrollbar ini menggunakan javascript yang mungkin akan sedikit menambah beban loading blog Anda.
Progress scrollbar ini letaknya di bawah address bar pada browser yang Anda gunakan, saya juga menambahkan efek gradasi pada progress scroll bar ini sehingga terlihat lebih cantik dan colorfull, tapi jika Anda tidak suka Anda bisa mengganti warnanya menjadi flat atau satu warna saja.
Jika Anda tertarik untuk memasang progress scrollbar pada blog silahkan ikuti langkah-langkahnya di bawah ini.
Cara Membuat Progress Scrollbar dengan Warna Gradasi di Blog
Membuat Progress Scrollbar di Blogger dengan Warna Gradasi
- Masuk ke Blogger.com
- Klik Tema > Edit HTML
- Masukan kode css ini di atas kode ]]></b:skin> atau </style>
/* Progress Scrollbar by caramanual.com */
#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);
}4. Kemudian tambahkan kode javascript ini di atas 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>5. Lalu tambahkan kode ini di bawah kode <body>
<div id="top-scrollbar">
<div id="top-scrollbar-bg">
</div>
</div>6. Terakhir klik Simpan tema
Catatan:
- Jika ingin mengganti warna silahkan ganti kode warna #5E64EE dan #5EEE66 gunakan tool color picker ini.
- Jika ingin menggunakan satu warna saja atau flat design silahkan hapus kode background:linear-gradient(45deg, #5E64EE, #5EEE66); lalu ganti menjadi background:#2967E3; gunakan tool color picker untuk menyesuaikan warna yang Anda inginkan.
- Solusi bagi yang menggunakan sticky menu navigasi, untuk mengatur letak progress scrollbar silahkan atur letak tingginya pada kode top: 0; menjadi top: 45px;
- Untuk yang ingin mengubah posisi progress scrollbar menjadi di bawah silahkan ganti kode top: 0; menjadi bottom: 0;
Jika Anda masih memiliki pertanyaan seputar memasang progress scrollbar ini, silahkan hubungi kami melalui halaman kontak atau bisa dengan berkomentar pada artikel ini.
