Add Fresh Percentage Value to a Scrollbar in Blogger Blog

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...

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.

COMMENTS

Name

Android,2,backlinks,7,Blogger,45,Errors,1,How To,31,Make Money Online,2,SEO,13,SMM,10,Templates,8,Tools,7,Tricks,15,Web designing,17,Widgets,24,WordPress,4,
ltr
item
PRO TECHNIFY: Add Fresh Percentage Value to a Scrollbar in Blogger Blog
Add Fresh Percentage Value to a Scrollbar in Blogger Blog
https://3.bp.blogspot.com/-bV2ttAxm2eg/V4SfpMU1KoI/AAAAAAAAJUk/yL8oMC6DCiEttxQnN0_CD-PzZZ7f5p3aQCLcB/s640/Percentage-value-scrollbar.jpg
https://3.bp.blogspot.com/-bV2ttAxm2eg/V4SfpMU1KoI/AAAAAAAAJUk/yL8oMC6DCiEttxQnN0_CD-PzZZ7f5p3aQCLcB/s72-c/Percentage-value-scrollbar.jpg
PRO TECHNIFY
http://www.protechnify.com/2016/07/add-percentage-value-scrollbar-blogger.html
http://www.protechnify.com/
http://www.protechnify.com/
http://www.protechnify.com/2016/07/add-percentage-value-scrollbar-blogger.html
true
8223102945718438291
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy