Ingin membuat tampilan blog kamu menjadi responsive & tentunya ringan?
Efek progress bar ini adalah salah satu contohnya, yang membuat blog kamu menjadi lebih menarik sehingga visitor beta lama-lama membaca semua Artikel di blog kamu.
Efeknya akan muncul garis horizontal dengan efek seperti loading, ketika di scroll bawah maka garis tersebut akan bergerak ke kanan, sebaliknya ketika di scroll ke atas maka garis tersebut akan bergerak ke kiri.
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 di Blog
- Masuk ke Blogger
- Klik Tema > Edit HTML
- Masukan kode CSS ini di atas kode ]]></b:skin>
/* Progress Scrollbar by faizaltech98.blogspot.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);
}- 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>- Lalu tambahkan kode ini dan salin di bawah kode <body>
<div id="top-scrollbar">
<div id="top-scrollbar-bg">
</div>
</div>- Terakhir klik Simpan Tema
Jika Anda masih memiliki pertanyaan seputar memasang progress scrollbar ini, silahkan hubungi kami melalui halaman kontak atau bisa dengan berkomentar pada artikel ini.
Itulah artikel mengenai cara membuat progress scrollbar dengan warna gradasi di blog, selamat mencoba. Semoga bermanfaat. Tags Blogger CSS Html Javascript
Subscribe Our Newsletter
Berikan Komentar
Posting Komentar
Silakan berikan komentar.