What is the Percentage Scrollbar?
Percentage Scrollbar is a feature that is able to calculate the extent to which your blog is tracked by visitors, so when someone scrolls down your post or website then next to your scrollbar there will be a percentage counter.
 |
| How To Add the Percentage Scrollbar On Blogger? |
By installing the percentage of scrollbar web or blog we will look more complete and interesting, and for installing the scrollbar percentage is not too complicated, now for those of you who are curious about how to make the Percentage Scrollbar you can read and apply the tutorial in this website, for DEMO of the percentage I'll make the scrollbar at the end of the post.
Let's just go to the tutorial to make Percentage Scrollbar
How to Make Scrollbar Percentages- As always login to Blogger,
- On the dashboard Blogger, Select Theme ➟ Edit HTML,
- Then find this code ]]></b:skin> or </style> if you have found copy the css code below and place it directly above the code mentioned earlier,
/ * 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;}
- After placing the code, find the code again <body> and copy the code below and place it directly above the code <body>
<div id = 'scrollPersentase' />
- Still not finished, then you look for the code again </body>, and place the javascript code below right above the code.
<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>
- Finally save theme.
If you want to change background color of Percentage Scrollbar -> Goto -> Color Palettes (choose desired color), Replace #ff69b4 in the css section.
0 comments