Cara Menciptakan Progress Scrollbar Warna Gradien Di Blog
Cara Membuat Progress Scrollbar Warna Gradien di Blog - Pada tutorial blogger kali ini aku akan membagikan sebuah tutorial bagaimana Cara Membuat Progress Scrollbar pada halaman bab atas blog dengan motif warna gradasi/gradient color atau perpaduan warna yang dapat kalian terapkan di blogger/blogspot.
Page scroll progress indicator ini akan tampil berbentuk garis horizontal di bab atas halaman blog atau dapat juga kalian pindah posisinya ke bab bawah halaman blog dengan fungsi utama dari progress scrollbar ini yaitu untuk pertanda hingga 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, alasannya yaitu Page scroll progress indicator yang satu ini memakai warna gradasi/perpaduan warna yang berdasarkan aku lebih yummy di pandang.
Progress Scrollbar Warna Gradien di Blog cukup mempunyai kegunaan kalau Sebuah blog atau website tersebut mempunyai konten atau postingan yang dapat di bilang cukup panjang. Karena dengan memakai progress indcator ini, pengunjung akan dengan gampang mengetahui hingga sejauh mana mereka membaca dan menscroll halaman blog tersebut.
Progress Scrollbar dengan warna gradasi ini memakai pure javascscript yang lalu di padukan dengan css untuk megatur warna-warna yang dapat kalian atur sesuai selera kalian. Untuk mempermudah menentukan warna yang ingin digunakan, silahkan gunakan Web Color Picker. Dan untuk mengetahui seperi apa hasilnya, silahkan cek demonya dibawah ini.
Selanjutnya kalau kalian tertarik ingin mencoba memasang Progress Scrollbar Warna Gradien di Blog ini, kalian dapat eksklusif ikuti tutorial singkat berikut :
Membuat Animasi Scrollbar dengan Warna Gradasi di Halaman Blog
Login ke Blogger
Klik Template - Edit HTML
Letakkan CSS berikut sebelum aba-aba ]]></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 aba-aba </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 kafetaria = 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 sesudah <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 bab -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 memakai satu warna saja silahkan hapus aba-aba -webkit-linear-gradient(left,#2B0C93 0,#ff2c02 56%,#FFB300 100%); lalu ganti menjadi #2B0C93 atau warna apa saja yang kalian kehendaki.
- Solusi bagi yang memakai sticky hidangan navigasi, untuk mengatur letak progress scrollbar silahkan atur letak tingginya pada aba-aba top: 0; menjadi top: 45px;
- Untuk yang ingin mengubah posisi progress scrollbar menjadi di bawah silahkan ganti aba-aba top: 0; menjadi bottom: 0;
Jika ada pertanyaan seputar menciptakan Page scroll progress indicator dengan warna gradasi/gradien di blog ini, kalian dapat tinggalkan jejak komentar.
Demikian tutorial Cara Membuat Progress Scrollbar Warna Gradien di Blog ini biar mempunyai kegunaan dan selamat mencoba.
Sumber https://www.pehawe.info/