Cara Memasang Progress Scrollbar Keren di Blogger

Cara memasang Progress Scrollbar Keren di Blog - Tutorial 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:

NamaKeterangan
top:0Kode tersebut agar Progress Crollbal tepat berada di atas, namun jika ingin meletakkan Progress Scrollbar di bawah postingan blog bisa menggantinya dengan kode ini bottom:0
#2fc8b4Bisa di ubah sesuai warna kesukaan anda, atau bisa menggantinya dengan gradient color
K4pxDigunakan untuk mengubah tebalnya garis pada Progress Scrollbar

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.