Buat Progress Scrollbar Warna Gradasi di Blog

PayuBaco
Hay sobat online saya kembali hehe, gak kerasa sudah sejauh ini kita melewati masa pandemi ini sudah hampir genap satu tahun. Kabar terbaru juga mengatakan untuk saat ini sudah ditemukan Vaksin untuk Covid ini, banyak pro dan kontra terkait hal tersebut. Ya begitulah Indonesia apapun itu pasti akan ada pro dan kontra, lalu apakah Vaksin ini bisa benar ampuh untuk menangani Pandemi Covid di Indonesia? Terkait itu silahkan sobat cari lagi informasinya karna diblog ini kita tidak akan membahas masalah Covid 19 hehe. 

Pernah gak sih sobat melihat sebuah blog atau website yang dibagian atas terdapat garis horizontal dimana ketika kita semakin kebawah dalam sebuah artikel maka garis tersebut akan memanjang ke kanan dan ketika kembali keatas garis horizontal tersebut akan bergerak ke kiri? Nah sob itulah yang namanya Progres Scrollbar dimana fungsinya sebagai pemberitahu sudah sejauh mana sobat membaca artikel tersebut, jika sudah penuh kekanan berarti artikel yang sobat baca sudah selesai.

Disclaimer : Progress Scrollbar ini menggunakan Javascript sehingga mungkin akan sedikit menambah beban blog sobat.

Contoh Tampilan Blog dengan Progress Scroolbar

Demo

Cara Membuat Progress Scroolbar Gradasi di Blog

1. Pertama silahkan sobat buka Blog >> Tema >> Edit HTML.


2. Masukkan kode CSS dibawah ini tepat diatas 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);
}

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. Terakhir silahkan sobat  Simpan Tema.
Catatan :
  • Jika hendak ganti 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;
Nah itulah sob tutorial yang dapat saya bagikan kali ini, jika sobat ada yang dirasa kurang faham silahkan tinggalkan komentar atau bisa hub kami melalui halaman kontak. Mohon maaf jika ada kesalahan penulisan dan jangan lupa share artikel ini keteman-teman yang lain supaya informasi ini tidak berhenti di kamu. Sampai jumpa diartikel selanjutnya