Top 10 Ultimate SEO Plugins For WordPress 2017-18
ProTechnify

12/07/2016

Add Fresh Percentage Value to a Scrollbar in Blogger Blog

percentage-value-blogger
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 and up. Before continuing this tutorial you have to make sure that you have already added the custom WebKit scrollbar because if you want to make your scrollbar same as in above image so you have to add custom WebKit scrollbar in your blog first then continue this article. Percentage script will work on both scrollbars default or in custom so it's your choice.

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 {
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;
}
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.
<div id='scroll'></div>
4. After this, copy the below script and paste it just above </body> tag.
<script>
/*<![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>
5. Click on Save Template and then click on View Blog for enjoy the cool custom scrollbar with percentage effect.

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.




0 comments:

Post a Comment