Wanting to make your Blogger cooler and stylish? You may want to add a percentage scrollbar to your Blogger site like the one we have here. This short guide will show you how you can easily add a percentage scrollbar to your Blogger site.
Blogger percentage scrollbar
The trick behind this Blogger widget is calculating how far the user has scrolled down a page and calculated the distanced with respect to the contents.
So, when a visitor scrolls down every single page on your blog, he or she will be able to know the volume of content read or seen and can estimate what volume is left.
Adding the percentage to the scrollbar
- Log in to your Blogger dashboard and go to "theme > Edit HTML"
- Next, copy and add this code just before the ]]</b:skin> tag.
/* Persentase Scrollbar */
#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;}
- Next, add this line of codes just after the <body> tag
<div id='scrollPersentase'/>
- And the finalise things, add the JavaScript code below before the </body> tag.
<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>
- Now safe your theme and there you go. You should now see the percentage scrollbar when you scroll down any page on your Blogger
0 Comments