Cara Memasang Persentase Ketika Blog Di Scroll Bar

Bani Cyber Blog - Bagaimana cara memasang angka persentase pada scroll bar di blog ketika di scroll? Apakah memiliki fungsi yang penting? Dan bagaimana tampilan persentase ini pada blog? Selengkapnya akan kita bahas bersama sama dibawah ini.


Persentase pada scroll bar sama sekali tidak memiliki fungsi pada blog, fungsinya hanya untuk mempercantik dan menambah nilai estetika tampilan blog. Jadi, ini sangat cocok untuk kamu yang suka tampilan blog yang elegan dan keren.


Kalau soal ringan/tidaknya, jquery persentase ini tidak terlalu menganggu loading blog. Jadi gak usah khawatir visitor kabur gara gara keberatan loading.


Huh, gak usah ngomong panjang lebar lagi, langsung aja deh kita bahas sama sama bagaimana cara memasang persentase di scroll bar blog. Let's reading.

1. Buka Template ⇒ Edit HTML
2. Tambahkan kode berikut diatas kode ]]></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; }

1. Cari kode </head> Letakkan dibawahnya

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

1. Terakhir Letakkan kode berikut 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(600); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#scroll').fadeOut(600); }, 1000); }); //]]> </script>

1. Simpan Template

Nah, coba lihat blog kamu. berhasil atau tidak? pasti 99% berhasil. Namun bila ada yang kurang mengerti dalam pemasangan bisa komentar di bawah sono.


CSS kode diatas bisa kamu modifikasi hingga sesuai dengan keinginanmu. Jadi, selamat mencoba ya! wassalamualaikum.

Source code: http://arlinadesign.blogspot.com/2014/10/memasang-persentase-pada-scrollbar.html

Al Bani HR Thursday, February 9, 2017 Blogging

Berlangganan via Email

Berlangganan artikel via email agar kamu mendapatkan info mengenai update artikel dari blog ini via email.