Memasang Persentase Pada Scrollbar - Arlina Design

Memasang Persentase Pada Scrollbar - Postingan selanjutnya mengenai cara memasang fungsi persentase pada scrollbar blog. Mungkin anda pernah melihat fungsi persentase ini di blog lain.

Sebenarnya persentase scrollbar ini bukan fitur yang penting bagi sebuah blog. Namun tidak ada salahnya untuk dicoba, itupun tergantung selera masing-masing.

Dengan menambahkan persentase ini bukan hanya sebagai hiasan blog semata tetapi pengunjung akan bisa melihat berapa persen halaman yang telah Ia scroll, apabila telah sampai di bawah halaman maka nilai persentase akan menjadi 100%.

Cara penerapannya pun cukup mudah, silahkan ikuti langkah-langkah sederhana berikut ini :


Pertama, simpan kode di bawah tepat di atas ]]></b:skin> atau </style>

#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;
}

Selanjutnya, simpan kode pemanggilnya di bawah  </head>

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

Simpan kode di bawah ini tepat 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(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

Kemudian simpan Template dan lihat hasilnya.

See the Pen Persentase Pada Scrollbar by Arlina Design (@arlinadesign) on CodePen.



Jika langkah-langkah yang anda lakukan tidak salah, maka blog anda seharusnya sudah ada persentase di samping scrollbar.

Cukup mudah bukan. Selamat mencoba.

Source : http://www.arlinadzgn.com/2014/10/memasang-persentase-pada-scrollbar.html

Memasang Persentase Pada Scrollbar


Memasang Persentase Pada Scrollbar - Postingan selanjutnya mengenai cara memasang fungsi persentase pada scrollbar blog. Mungkin anda pernah melihat fungsi persentase ini di blog lain.

Sebenarnya persentase scrollbar ini bukan fitur yang penting bagi sebuah blog. Namun tidak ada salahnya untuk dicoba, itupun tergantung selera masing-masing.

Dengan menambahkan persentase ini bukan hanya sebagai hiasan blog semata tetapi pengunjung akan bisa melihat berapa persen halaman yang telah Ia scroll, apabila telah sampai di bawah halaman maka nilai persentase akan menjadi 100%.

Cara penerapannya pun cukup mudah, silahkan ikuti langkah-langkah sederhana berikut ini :


Pertama, simpan kode di bawah tepat di atas ]]></b:skin> atau </style>

#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;
}

Selanjutnya, simpan kode pemanggilnya di bawah  </head>

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

Simpan kode di bawah ini tepat 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(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>

Kemudian simpan Template dan lihat hasilnya.

See the Pen Persentase Pada Scrollbar by Arlina Design (@arlinadesign) on CodePen.



Jika langkah-langkah yang anda lakukan tidak salah, maka blog anda seharusnya sudah ada persentase di samping scrollbar.

Cukup mudah bukan. Selamat mencoba.

Source : http://www.arlinadzgn.com/2014/10/memasang-persentase-pada-scrollbar.html
Portal Bola Online

Related Post

Portal Bola Online
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo