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

Ahmad Shoffa

Suka jalan-jalan untuk mencari inspirasi. Beginner Web Developer

Posting Komentar

Lebih baru Lebih lama