In this article, you will learn how to add percentage value to a scrollbar in blogger blog with awesome and fresh effects of slide down a...
You can also see the demo of this percentage scrollbar HERE.
For your keen interest, i mention some cool qualities of this percentage scrollbar script.
- It is fully fresh and will never hang or stop on your blog.
- This script is made from professionals so you don't need to worry about any bugs or error.
- It is fast and responsive.
- You can design it yourself easily by playing with CSS.
Let's start to know about the implementation of this cool percentage script in your blogger blog.
1. First, open your blogger account and move on Template>> Edit HTML.
2. Copy the below CSS styles and paste it above/before ]]></b:skin> and click on save template.
#scroll {3. Now add the below code in between </head> and <body> tag e.g. add the below code just above/before the <body> tag and after the </head> tag.
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;
}
4. After this, copy the below script and paste it just above </body> tag.<div id='scroll'></div>
<script>5. Click on Save Template and then click on View Blog for enjoy the cool custom scrollbar with percentage effect.
/*<![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>
Read This:
If you getting any problem in implementation so I am here to solve your all issues according to this article and don't forget to share your views about this article in comments if it successfully works on your blogger blog.
COMMENTS