Memasang Persentase Pada Scrollbar

10/05/2014


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://arlinadesign.blogspot.com/2014/10/memasang-persentase-pada-scrollbar.html

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

20 comments

wah ini dia, yang sya cri. mkseh mba.

Balas

genial gracias amigo como siempre el mejor :)

Balas

silahkan sob, sama2

Balas

Sangat Menarik dan tambah gaya sebuah blog jika ada persentase pada scrollbar
terimakasih ijin simpan... :)

Balas

iya betul, biar tambah menarik...

Balas

bagus nih sis,, bisa melihat persentase kedalaman halaman blogger,hehe

Balas

lmyn mas, nambah variasi blog

Balas

Wah, mainan baru nih buat blog saya, nanti saya coba terapkan gan.. thanks sebelumnya..

Balas

OOT mbak, ini kok bisa gini ya? http://4.bp.blogspot.com/-RvBupJZA964/VDJ9kc0KtkI/AAAAAAAAAo4/eVJ49UVaQIU/s1600/Screenshot_1.png ada tanda > di pojok kiri atas dan popular post, site info, arsip tidak jadi satu? padahal tata letak sudah benar.. atau mungkin ada kode yang terhapus, tolong mbak..

Balas

posisi kode2 di tag penutup </body> sepertinya, silakan diatur kembali tata letaknya

Balas

Mbak arlina,.. maap saya mau nanya,..
saya kan habis edit menu navigasi bentuk ribbon,..
tapi ko posisinya dia tetap terus yah,.. jadi gak center gtu,..
ini cth tampilanya > http://responsivetest.net/#u=http://treasurytube.andikaprasetia.com/|1920|1080|1

kira2 yang perlu diperbaiki yg mana y mbak?
trm ksh sebelumnya,..

Balas

pindahkan semua kode dimulai dr <!-- Header (Start)--> sampai ke <!-- Video Slider (End)-->

pastekan di dalam / di bawah <div id="outer-wrapper">

Balas

Hi how are you i want to explain how the work of this post =( of innovative example
http://im54.gulfup.com/fUCUJF.png

Balas

Hi how are you i want to explain how the work of this post =( of innovative example
http://im54.gulfup.com/fUCUJF.png

Balas

i'm no longer shared the redesign template

Balas

Arina hello i want to use some code in my blogspot eg some segments HTML, CSS , jQuery , I want them to look like your blogspot . Please help me do that,
thank Arina

Balas

Makasih gan, sudah saya terapkan di blog saya. Untuk mengubah warna backgroundnya gimana sih gan?

Balas

Numpang tanya lagi gan, cara buat resulut seperti postingan di atas gimana gan?

Mohon bantuannya.

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.