• About Me
  • Sitemap
  • Privacy Policy
  • Disclaimer
  • Pasang Iklan

Re-Vunsblade™

  • Beranda
  • Sepakbola
    • Liga Inggris
    • Liga Spanyol
    • Liga Italia
    • Liga Indonesia
  • Tekno
    • Gadget
    • Internet
  • Adsense
  • SEO
  • Unik dan Menarik
  • Blogging
Home » Tutorial blog » Cara Membuat Persentase Pada Scrollbar

Cara Membuat Persentase Pada Scrollbar

Baiklah kali ini saya akan berbagi Tuorial yang mungkin menurut anda tidak penting untuk blog anda namun apa salahnya untuk dicoba terlebih dahulu.

Cara Membuat Persentase Pada Scrollbar

DEMO

Dengan menambahkan persentase pada Scrollbar ini berarti anda telah membantu pengunjung untuk mengetahui sudah berapa persen halaman yang telah di scroll, dan apabila di scroll sampai bawah maka akan menjadi 100%.

Silahkan ikuti langkah-langkah berikut ini.

Langkah 1 : Masuk ke Template dan Edit HTML. Letakkan kode berikut ini diatas ]]></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;
}


Langkah 2 : Simpan kode di ini bawah </head>

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


Langkah 3 : Simpan Javascript ini diatas </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>

Simpan Template.
Selamat. Anda telah berhasil menambahkan persentase di sampping scrollbar. Jika ada masalah silahkan tinggalkan komentar Anda.
Ditulis oleh Admin Trix, Monday, 8 July 2013 - Rating: 4.5
Judul : Cara Membuat Persentase Pada Scrollbar
Deskripsi : Baiklah kali ini saya akan berbagi Tuorial yang mungkin menurut anda tidak penting untuk blog anda namun apa salahnya untuk dicoba terlebih ...

Bagikan ke

Facebook Google+ Twitter
Newer Post
Older Post
Home

Contact Form

Name

Email *

Message *

Translate

Ads

Followers

Blog Archive

  • August (4)
  • July (34)
  • June (1)
  • May (7)
  • November (9)
Copyright © 2012 Re-Vunsblade™ - All Rights Reserved
Design by Mas Sugeng - Powered by Blogger