Cara Membuat Persentase Pada Scroll di Blog

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 blog...

Malestea
By Malestea
2
Cara Membuat Persentase Pada Scroll di Blog

Cara Membuat Persentase Pada Scroll di Blog

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 blog...

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%

Cara Membuat Persentase Pada Scroll di Blog

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 :#
Malestea

Kota: Bandung, Pasirkoja - Kabupaten bandung.

2 comments

  1. Dzulkifli
    Apa ada tutorial buat gambar slide
    • Malestea
      ada donks, cuman belum saya publikasikan saja heeh