Add stylish percentage value in Blogger Scrollbar
Add stylish percentage value in Blogger scrollbar with fading effect
Previously I have shared with you that how to add webkit override
effect on blogger scroll bar. Today I am going to share with you that how we
can add an stylish progress by percentage value in blogger scrollbar. This
widget is very attractive and effective for those who wants to know about the
scroll percentage.
In this widget I have calculated the total page as 100%
and added value which will change after scrolling. When you will be at the top of
blogger template then the value will show 0% and when you scroll down then it
will display the percentage value of scrolling. I think this trick is pretty much
cool. This widget made with pure CSS. Black and Royal blue percentage holder
with fading effect.
So to install this please flow the below steps-
Step 1 Log in to your Blogger Account and
Click on Template ->
Step 2 Now click on Edit HTML-> Unfold code ►
Step 3 Now find ]]></b:skin> by Pressing Ctrl + F
Step 4 And Paste the below code
above ]]></b:skin>
/** stylish percentage value by www.bloggerspice.com **/
#BloggerSpiceScroll {
display: none;
position: fixed;
top: 0;
right: 10px;
z-index: 500;
padding: 3px 8px;
background-color:#000000;
color: #fff;
border-radius: 3px;
}
#BloggerSpiceScroll:after {
content: " ";
position: absolute;
top: 50%;
right: -7px;
height: 0x;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: rgb(4, 189, 250);
}
@media screen and (max-width:600px){
#BloggerSpiceScroll{
display:none;
}
Step 5 Now find <body> by Pressing Ctrl + F
Step 6 And Paste the below code
after <body>
<div id='BloggerSpiceScroll'/>
Step 7 Now find </body> by Pressing Ctrl + F
Step 8 And Paste the below code
above/before </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 - $('#BloggerSpiceScroll').height() / 2;
$('#BloggerSpiceScroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#BloggerSpiceScroll').fadeOut();
}, 1500);
});
//]]>
</script>
Step 9 Now hit the save button
That's it. Check your blogger to see the effects. If you have
any query then feel free to contact with me.
2 comments