Menampilkan Waktu Untuk Indonesia Bagian Barat.

Archive

Home
Widget

Cara Pasang Animasi ProgressBar di Template Blogger


Pernahkah kalian melihat website yang mana saat kita baca artikelnya dan scrool ke bawah akan menampilkan efek progress dibagian atas atau samping websitenya.

Sebagai contoh Youtube menerapkan efek tersebut, jika kita melakukan scroll kebawah maka tepat diatasnya akan menampilkan progressbar sejauh mana kta scroll artikelnya.

Efek animasi saat scroll blog kebawah dan memunculkan garis horizontal di atas blog kita, ini bisa di terapkan pada blogger.

Scroll progressbar ini juga dapat mempercantik tampilan saat blog di scrool, dan juga dapat membantu pengunjung untuk mengetahui sejauh mana mereka telah membaca artikel kamu.

Pasang scrollbar progressbar ini sangat rekomendasi buat blog-blog dengan artikel yang panjang. Berikut tutorialnya dibawah.

Cara Pasang ProgressBar Pada Blogger


  1. Masuk Blogger > Tema > Edit HTML

  2. Cari kode ]]></b:skin> atau </style>

  3. Copy code CSS dibawah dan letakkan disalah satu tag yang kita cari tadi tepat diatasnya.



    4. /* ProgressBar */

    #scroll-progress-musscripts { position: fixed; top: 0; left: 0; width: 0%; height: 10px; overflow: hidden; z-index: 99999; }
    #scroll-progress-musscripts-ken { width: 100%; height: 100%; position: absolute; background:#2a00ff; }


  4. Lalu letakkan kode HTML dibawah ini tepat di bawah tag <body>


    5.   <div id="scroll-progress-musscripts">
      <!-- Kenscripts.me -->
      <div id="scroll-progress-musscripts-ken"></div>
     </div>

  5. Kemudian cari kode </body> dan letakkan kode Javascript dibawah ini tepat diatas tag </body>


    6.   <script>
    //<![CDATA[
    var bar_ken = document.getElementById("scroll-progress-kenscripts-ken"),
        body = document.body,
        html = document.documentElement;
        
    window.onscroll = function() {
        var bar = document.getElementById("scroll-progress-kenscripts"),
            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>

  6. Selesai..

Note :
Silahkan ganti warna #2a00ff sesuai keinginan kamu. Lalu rubah tinggi scroll barnya dengan mengganti nilai height: 10px.


Jika ada yang kurang mengerti dengan uraian postingan ini silahkan berikan masukan atau tanyakan pada kolom komentar dibawah.

Post a Comment