Sunday, November 13, 2016
Cara Membuat Persentase pada Scrollbar blog
Cara Membuat Persentase pada Scrollbar blog
Selamat malam sahabat blogger semua !!! Kali ini, aq akan berbagi tutorial tentang Cara Membuat Persentase pada Scrollbar.
Dengan menambahkan persentase scrollbar, pengunjung akan bisa melihat berapa persen halaman yang telah di scroll, apabila sampai bawah di scroll maka akan menjadi 100%. ( Penambahan scroll ini insyaallah tidak akan membuat loading blog menjadi berat. )
Tutorial Cara Membuat Persentase pada Scrollbar blog :
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>
4. Simpan Template.
Sekarang, coba lihat pada blog sobat. :)
Sekian dulu ya tips dariku, semoga bermanfaat... :)
Go to link Download
