Menambahkan Progress Scroll Bar Top Di Blogger

Progress Scroll Bar merupakan fitur yang mana pembaca dapat mengetahui seberapa banyak konten suatu halaman web. Dengan adanya Progress Scroll Bar, akan lebih mempermudah pengguna. Untuk membuat fitur tersebut, silahkan tambahkan kode berikut di web anda.

<style>
    .top-progress-bar{
        background:linear-gradient(90deg,#99ccff 10%,#0000ff 90%);
        opacity:.95;
        position:fixed;
        top:0;
        left:0;
        height:5px;
        z-index:999;
        transition:all .4s cubic-bezier(.47,1.64,.41,.8);
    } 
</style>
<div class="top-progress-bar" id="scrollbar-top"></div>
<script>
    window.addEventListener("scroll",scrolltop);
    function scrolltop(){
        var winScroll=document.body.scrollTop||document.documentElement.scrollTop;
        var height=document.documentElement.scrollHeight-document.documentElement.clientHeight;
        var scrolled=(winScroll/height)*100;
        document.getElementById("scrollbar-top").style.width=scrolled+"%";
    }
</script>

Jika anda menggunakan blogger, maka silahkan ikuti cara berikut:

• Login ke akun blogger anda
• Klik menu Tata Letak
• Di bagian Tata Letak, klik Tambahkan Gadget
• Di bagian input judul, diisi Progress Bar / Kosongi juga nggak masalah
• Dan di bagian Input Konten, isikan script di atas
• Klik simpan, dan lihat hasilnya
• Untuk mengubah warna, silahkan ganti #99ccff dan #0000ff sesuai code warna di HTML