How to show percentage value along with the scrollbar in blogger
In today’s post , i will explain that how you can add/show percentage
value to scrollbar in blogger blog. actually it is not important for
your blog, but this is for those who want to give unique effect to
scroll-bar in their blog. it may be helpful for your readers to check
that how much they have scrolled down or up or how much content left to
be read.
Check the preview below and follow the steps, if you want to add this right to your blog.
Preview :
How to add percentage value to scrollbar in blogger?
1. Go to blogger –> Tempalte –> Edit HTML
2. CTRL + F to find this : ]]></b:skin>
3. Copy and paste below code just above this : ]]></b:skin>
5. Copy and paste below code just after </head>
7. Copy and paste below code just above </body>
That’s it.
Check the preview below and follow the steps, if you want to add this right to your blog.
Preview :
How to add percentage value to scrollbar in blogger?
1. Go to blogger –> Tempalte –> Edit HTML
2. CTRL + F to find this : ]]></b:skin>
3. Copy and paste below code just above this : ]]></b:skin>
#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;
}
5. Copy and paste below code just after </head>
<div id='scroll'></div>
</head>
<div id='scroll'></div>
<body>
7. Copy and paste below code just above </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 - $('#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>
That’s it.
No comments