Cara Membuat Persentase Pada Scroll di Blog - KodeRian

Halo sobat KodeRian pada kesempatan kali ini saya akan membagikan sebuah Tutorial untuk Blogger yaitu "Persentase Pada Scroll" fitur sederhana menurut saya untuk membuat blog menjadi menarik dikarenakan ada sebuah Persentase pada saat pengunjung melakukan Scroll akan melihat berapa persen halaman yang telah ia Scroll, apabila telah sampai di bawah halaman maka nilai Persentase akan menjadi 100%

Bagaimana tampilan nya ? mungkin itu yang ingin diketahui oleh kalian bukan ? daripada penasaran coba di cek dulu "Demo" untuk "Persentase Pada Scroll" tersebut dibawah :#

See the Pen
Persentase Scroll by Rian_kuno (@rian_kuno)
on CodePen.

Bagaimana tampilan nya ? menarik bukan dan berbeda dengan yang lain :3

Untuk menambahkan ke "Blogger" kalian tinggal ikuti langkah dibawah ini

Cara Membuat Persentase Pada Scroll di Blog

1. Buka Blogger
2. Klik Tema > Klik "Edit HTML"
3. Tambahkan kode berikut tepat dibawah kode <style> atau <b:skin>

#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 15px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #369fcf;
  color: #fff;
  border-radius: 3px;
  font-size: 14px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -10px;
  height: 0;
  width: 0;
  margin-top: -6px;
  border: 6px solid transparent;
  border-left-color: #369fcf;
}

4. Tambahkan kode berikut tepat dibawah kode </head>

<div id='scroll'></div>

5. Tambahkan kode berikut tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

6. Simpan Tema
7. Selesai

Bagaimana hasilnya ? sama bukan dengan yang tampilan "Demo" tampilan nya sederhana tapi menarik mata kalian :3

Sampai disini saja dulu dan artikel pada blog ini akan terus saya update Setiap Hari meskipun cuman Satu atau Dua saja tapi itu lebih baik daripada Tidak :#