Cara Mudah Membuat Presentase Scrool di Blogspot

cara membuat persen scrool di blogspot


Cara Mudah Membuat Presentase Scrool di Blogspot  - Tutorial kali ini admin akan membahas cara membuat persen pada scrollbar di blogspot. Scrollbar ini berfugsi jika pembaca memuat artikel yang sedang di baca, sehingga menampilkan jumlah persen halaman yang telah di baca.

Jika kamu tertarik ingin membuat widget ini ke dalam blog kamu, silahkan ikuti tahapan-tahapan di bawah ini.

Cara Memasang Presentasi Scrollbar di Blogger 

1. Masuk ke Blogger Kemudian klik Thema > Edit HTML
2. Selanjutnya masukkan code css di bawah ini tepat di atas code ]]></b:skin> atau </style>
/* Scrollbar Persentase */
#scroll {
display:none;
position:fixed;
top:0;
right:5px;
z-index:500;
padding:3px 8px;
background-color:#4B4B4B;
color:#FFF;
border-radius:3px
}

#scroll:after {
position:absolute;
top:50%;
right:-8px;
height:0;
width:0;
margin-top:-4px;
border:4px solid transparent;
border-left-color:#4B4B4B
}
3. Selanjutnya tambahkan code di bawah ini tepat di atas code <body>
<div id='scroll'/>
4. Lalu terkhir tambahkan code berikut tepat di atas code </body>
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);
});
/*]]>*/
5. Lalu save templaate yang telah kamu setig tadi