How to add percentage value to scrollbar in your blog
Hello hope you are fine. Previously we disscussed about the customization of scrollbar in blogger. And today i show you how we can add percentage value to scrollbar in blogger blog. By adding the percentage value to your blog will make your blog more attractive to your readers and audience. So let's see how you can add percenteage value to scrollbar in your blog.
Steps of How to add percentage value to scrollbar in your blog
Below are the some simple steps through them you can successfully add a percentage value to scrollbar in your blog.
Adding of CSS style
First of all login to your dashboard and then goto Template and click on edit HTML. At their serach for ]]></b:skin> tag and paste the below piece of css code.
#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;
}
Step 2
After adding the above chunk of code now search for </head> tag and just after it paste the below piece of code. Make sure that below code should be placed between </head> tag and <body> tag.
<div id='scroll'></div>
Step 3
After the above steps now be ready for final step. Now search for </body> tag and just above it paste the below piece of code. and then click on save template.
<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>
From Editor's desk
I hope this tutorial will help you in uderstanding of How to add percentage value to scrollbar in your blog. If you have any problem or want to share your thoughts with us simply comment below and try to solve your problem as early as possible.
How to add percentage value to scrollbar in your blog
Reviewed by Maher Afrasiab
on
5:59:00 am
Rating:
Reviewed by Maher Afrasiab
on
5:59:00 am
Rating:
Not working bro.
ReplyDeleteNice Post! Well Written :)
ReplyDeleteThis article is interesting.
ReplyDelete