Cara Membuat Progress Scrollbar Warna Gradien di Blog
Cara Membuat Progress Scrollbar Warna Gradien di Blog - Pada tutorial blogger kali ini saya akan membagikan sebuah tutorial bagaimana Cara Membuat Progress Scrollbar pada halaman bagian atas blog dengan motif warna gradasi/gradient color atau perpaduan warna yang bisa kalian terapkan di blogger/blogspot.
Page scroll progress indicator ini akan tampil berbentuk garis horizontal di bagian atas halaman blog atau bisa juga kalian pindah posisinya ke bagian bawah halaman blog dengan fungsi utama dari progress scrollbar ini adalah untuk menunjukan sampai dimana kita berada pada halaman blog.
Mungkin kalian pernah berkunjung ke sebuah blog/website dan menemukan sebuah progress indicator pada halaman blog tersebut, namun biasanya kebanyakan dari mereka menampilkan angka dan %. Beda halnya dengan yang satu ini, karena Page scroll progress indicator yang satu ini menggunakan warna gradasi/perpaduan warna yang menurut saya lebih enak di pandang.
Progress Scrollbar Warna Gradien di Blog cukup berguna jika Sebuah blog atau website tersebut memiliki konten atau postingan yang bisa di bilang cukup panjang. Karena dengan menggunakan progress indcator ini, pengunjung akan dengan mudah mengetahui sampai sejauh mana mereka membaca dan menscroll halaman blog tersebut.
Progress Scrollbar dengan warna gradasi ini menggunakan pure javascscript yang kemudian di padukan dengan css untuk megatur warna-warna yang bisa kalian atur sesuai selera kalian. Untuk mempermudah memilih warna yang ingin digunakan, silahkan gunakan Web Color Picker. Dan untuk mengetahui seperi apa hasilnya, silahkan cek demonya dibawah ini.
Selanjutnya jika kalian tertarik ingin mencoba memasang Progress Scrollbar Warna Gradien di Blog ini, kalian bisa langsung ikuti tutorial singkat berikut :
Membuat Animasi Scrollbar dengan Warna Gradasi di Halaman Blog
Login ke Blogger
Klik Template - Edit HTML
Letakkan CSS berikut sebelum kode ]]></b:skin> atau </style>
#top-scrollbar {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 4px;
overflow: hidden;
z-index: 99999;
}
#top-scrollbar-bg {
width: 100%;
height: 100%;
position: absolute;
background:-webkit-linear-gradient(left,#2B0C93 0,#ff2c02 56%,#FFB300 100%);
}Kemudian letakkan javascript dibawah ini 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>Silahkan tambakan div pemanggil berikut setelah <body>
<div id="top-scrollbar">
<div id="top-scrollbar-bg">
</div>
</div>Terakhir silahkan simpan setelan template
Note :
- Jika ingin mengganti warna silahkan ganti pada bagian -webkit-linear-gradient(left,#2B0C93 0,#ff2c02 56%,#FFB300 100%). Gunakan tool color picker untuk mempermudah kalian menentukan warna yang ingin kalian gunakan.
- Jika ingin menggunakan satu warna saja silahkan hapus kode -webkit-linear-gradient(left,#2B0C93 0,#ff2c02 56%,#FFB300 100%); kemudian ganti menjadi #2B0C93 atau warna apa saja yang kalian kehendaki.
- 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 ada pertanyaan seputar membuat Page scroll progress indicator dengan warna gradasi/gradien di blog ini, kalian bisa tinggalkan jejak komentar.
Demikian tutorial Cara Membuat Progress Scrollbar Warna Gradien di Blog ini semoga berguna dan selamat mencoba.
Join the conversation