Membuat Persentase Pada Scrollbar

Posted by Unknown on Senin, 22 Juli 2013

haloo sahabat blogger, sudah lama nih saya gak ngeblog karena kesibukan sehari hari,hhehe. sebenarnya sih tutorial kali ini tidak terlalu penting namun dari pada blog ini gak ada postingan baru mending berbagi tutorial tentang Membuat Persentase pada Scrollbar

Dengan menambahkan persentase, pengunjung akan bisa melihat berapa persen halaman yang telah di scroll, apabila sampai bawah di scroll maka akan menjadi 100%.

Persentase Pada Scrollbar

Catatan : sebelum melakukan editing pada template blog, Biasakan untuk membackup template.

Untuk membuatnya silahkan ikuti langkah-langkahnya :

1. Masuk ke Template dan Edit HTML. dan Simpan kode ini di atas ]]></b:skin>
#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #2187e7;
  color: #fff;
  border-radius: 3px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #2187e7;
}

2. Simpan kode ini di bawah </head>
<div id='scroll'></div>

3. Simpan JavaScript ini di atas </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(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>
 Dan yang Terakhir Simpan Template

Mungkin hanya itu yang bisa saya bagikan kepada sobat, silahlan tanyakan bila ada yang kurang jelas di komentar,,,

Membuat Persentase pada Scrollbar by Bloggertut
Judul : Membuat Persentase Pada Scrollbar
Label :
URL : http://wahyu-only.blogspot.com/2013/07/membuat-persentase-pada-scrollbar.html

35 komentar:

  1. Kayaknya sudah bikin persentase, pake ngedit html. Saya nggak ngerti sama sekali.

    BalasHapus
    Balasan
    1. hehe..gpp mas, saya juga masih belajar kok :)

      Hapus
  2. keren jg sob, tp takutx memberatkan blog., thx :-bd

    BalasHapus
  3. saya pernah liat persenan kaya gne di teman blogger, tapi baru tahu sekarang caranya :)

    BalasHapus
  4. Aduh, ane kagak paham masalah ginian bos..hehehe

    BalasHapus
  5. emangnya lagi sibuk :p ?


    wah tips yg menarik :D thx bro

    BalasHapus
    Balasan
    1. .sibuk mas :)

      .yup sama2..makasih juga kunjunganya...

      Hapus
  6. Keren mas widgetnya, kalau misalnya kita scroll ke bawah otomatis langsung berubah ya mas persentase nya? :)

    BalasHapus
    Balasan
    1. Memang begitu mas, kalo sudah dipasang ;)

      Hapus
  7. keren gan terimakasih banyak sudah berbagi

    BalasHapus
  8. berat gak nih sob buat blog ,, ?

    BalasHapus
  9. Bingung gan, nggak paham saya.hehe

    BalasHapus
  10. mantab nih sob, tapi ane masangnya nanti aja nih, lagi males ngedit2 html. ^_^

    BalasHapus
    Balasan
    1. saya juga lagi males edit2 template =D

      Hapus
  11. nyimak aja mas,,,,
    kapan" saya praktek kalau k warnet,,, hehehehe

    BalasHapus
  12. Bagus, pengen pasang nih.. makasih ya tutorialnya.?

    BalasHapus
  13. Menarik nih mas
    Trims ya buat tutorialnya :)

    BalasHapus
  14. nice tutor gan,,,keren,thanks untuk tutornya gan

    BalasHapus
  15. nyimak aje sob soalnya saya gk suka ama elemen Scrollbar2an :D

    BalasHapus
  16. jadi ketauan udah scroll berapa persen ya...

    BalasHapus
  17. Berhasil diterapkan sob.. :)
    ijin share ya.. :) salam knal :)
    blog sobat udh aq follow nih, jka sobat tak kberatan.. tlong di follback ya :)
    http://fahrurrozi18.blogspot.com/

    BalasHapus

------------------------------------------------------------------------------------------
Catatan:
• Dilarang menulis link aktif!
• Dilarang ngiklan di kolom komentar!
• Kritik dan Saran sangatlah dibutuhkan, agar blog ini menjadi blog
yang lebih berkualitas.

Thank's
------------------------------------------------------------------------------------------


Flag Counter