Cara Memasang Progress Scrollbar Keren di Blogger

Cara memasang Progress Scrollbar Keren di Blog – Kali ini saya akan membagikan cara membuat progress scrollbar atau biasa juga disebut animasi proses scrollbal di atas halaman atau postingan blog.

Progress Scrollbar adalah sebuah garis berwarna di atas postingan blog yang memberikan petunjuk pada pembaca sampai dimana artikel ini berakhir. Progress Scrollbar ini berbentuk sebuah garis horizontal berwarna di atas postingan blog atau berbentuk seperti loading, saat blog di scroll ke bawah garis tersebut akan bergerak ke arah kanan atau saat kita scroll ke atas maka garis tersebut akan bergerak ke arah kiri.

Sebenarnya disetiap browser yang kita miliki sudah mempunyai Progress bar di samping kanan layar anda, namun Progress bar yang satu ini berfungsi untuk memperindah blog kita, karena berbentuk horizon dan berwarna lebih menarik, sehingga para pembaca tidak merasa bosan lihat blog atau website kita.

Perlu diketahui walaupun mempercantik tampilan blog, progress scrollbar ini menggunakan JavaScript sehingga akan menambahkan sedikit beban pada loading atau proses memuat blog anda. Namun jika anda tertarik memasangnya di blog anda, silahkan ikuti tutorial berikut.

Cara Memasang Progress Crollbar Keren di Blog

  1. Buka blogger
  2. Pilih Menu Tema
  3. Pada menu SESUAIKAN, pilih Edit HTML
  4. Tambahkan kode ini tepat beradda diatas kode </body>
    <script type='text/javascript'>
    //<![CDATA[
    // scrollbar-top Scrollbar
    $(document).ready(function(){var n=function(){return $(document).height()-$(window).height()},o=function(){return $(window).scrollTop()};if("max"in document.createElement("scrollbar-top")){(r=$("scrollbar-top")).attr({max:n()}),$(document).on("scroll",function(){r.attr({value:o()})}),$(window).resize(function(){r.attr({max:n(),value:o()})})}else{var e,t,r=$(".scrollbar"),i=n(),c=function(){r.css({width:(e=o(),t=e/i*100,t+="%")})};$(document).on("scroll",c),$(window).on("resize",function(){i=n(),c()})}});
    //]]>
    </script>
  5. Selanjutnya tambahkan kode ini tepat berada di bawah kode <body>
    <scrollbar-top value='0' max='1'>
       <div class='scrollbar-color'>
          <span class='scrollbar'></span>    
       </div>
    </scrollbar-top>
  6. Lanjut, Tambahkan kode ini tepat berada si atas </style>
    /* scrollbar-top Scrollbar */
    scrollbar-top{position:fixed;left:0;top:0;width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:#2fc8b4;z-index:1000}
    scrollbar-top::-webkit-scrollbar{background-color:transparent;z-index:10}
    scrollbar-top::-webkit-scrollbar-top-value{background-color:#2fc8b4;z-index:10}
    scrollbar-top::-moz-scrollbar{background-color:#2fc8b4;z-index:10}
    .scrollbar-color{width:100%;background-color:transparent;position:fixed;top:0;left:0;height:3px;display:block;z-index:10}
    .scrollbar{background-color:#2fc8b4;width:0%;display:block;height:inherit;z-index:10}
  7. Terakhir, jika sudah selanjutnya pilih Simpan Tema

Untuk yang bercetak tebal merah anda bisa memodifikasinya sesuai dengan keinginan anda sendiri, berikut keterngannya:

Sekian dari saya tutorial dari saya tentang Cara Memasang Progress Scrollbar Keren di blog, semoga tutorial ini sangat memberikan manfaat bagi anda. Jika ada sesuatu yang kurang jelas bisa langsung ditanyakan di kolom komentar, Terimakasih.

Tinggalkan komentar