Cara Memasang Persentase Scrollbar di Blogger

OIFnews.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Memasang Persentase Scrollbar di Blogger dengan mudah. Persentase Scroolbar merupakan fitur menarik yang mampu menghitung berapa persen kamu melakukan scrool kebawah.


Dengan Melakukan pemasangan persentase Scroolbar ini membuat blog kamu menjadi lengkap dan menarik untuk pengunjung, dan  untuk memasang Scroolbar ini pun tidak terlalu rumit, nah langsung saja kita ketutorialnya.

Berikut Cara Membuat dan Memasang Persentase Scrollbar di Blogger

1. Silahkan kamu login ke akun blogger.com kamu dengan menggunakan Gmail.
2. Masuk ke menu TEMA > klik Edit HTML
3. Kemudian kamu cari kode berikut ini ]]></b:skin> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

/* Persentase Scrollbar OIF News */
#scrollPersentase {display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#ff69b4;color:#FFF;border-radius:3px}
#scrollPersentase:after {position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;}
4. Setelah kamu memasang kode diatas, selanjutnya cari kode <body> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

<div id='scrollPersentase'/>
5. Masih belum selesai, selanjutnya silahkan kamu tambahankan kode javascript dibawah ini tepat DIATAS kode </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 - $('#scrollPersentase').height() / 2;
$('#scrollPersentase')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scrollPersentase').fadeOut();
}, 1500);
});
/*]]>*/
</script>
6. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagaimana mudah bukan untuk tutorial Cara Memasang Persentase Scrollbar di Blogger Dengan Mudah, untuk kamu yang memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah ini.
Show comments
Hide comments

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel