How To Add Reading Scroll Progress Bar In Blogger

Team TeachWiki

"scroll Progress bar" is an extremely famous idea to show visitors how much post has been readed. This is an extremely interesting animation, where readers can perceive how long this page is, the amount it has read and how much is left. It makes a remarkable impact on the visitors experience. It makes their web surfing simple.

You can implement this bar on your blog with the help of javascript code and using other third party plugins. But today We are going to use javascript to create "Progress Scroll Bar Animation". If you want to use third party plugins you can.

Add Reading Scroll Progress Bar Like This

I will direct you to Add Reading Progress Bar in Blogger, Ok, how about we start!

Attention! Before doing any kind of changes in your site's template take a backup first. This will helps you to restore your theme later.

In step one firstly decide where you want to show your progress bar mostly websites show this bar on top of the header but you can change the location of this bar. If you want to show this on top follow this step.

  • Open your blog or - Create account
  • Go to Theme > edit html 
  • Type Ctrl+f and search <body>
  • Paste given code after <body> tag.
<div class='scroll-container'><div class='scroll-bar' id='scrolled'/></div>

After step no one friends we are going to add some javascript if you do not add this script than scroll progress bar will not work. OK

  • Type Ctrl+f and search </body>
  • Paste given code before </body> tag.
<script type='text/javascript'>
  window.onscroll = function(){
  var windowScroll = document.documentElement.scrollTop;
  var windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrollAmount = (windowScroll/windowHeight)*100;
  document.getElementById(&quot;scrolled&quot;).style.width = scrollAmount + &quot;%&quot;;
};
</script>

Guy's for customization of this scroll progress bar we need to add some css in our theme

  • Type Ctrl+f and search </head>
  • Paste given code before </head> tag.
<style>.scroll-container{position: fixed;width: 100%;top: 0px;background-color: #fff;margin: 0px;z-index: 9999;}.scroll-bar{height: 3.5px;background: #1B334B;width: 0%;}</style>

Save template and see the result.

If you are new and do not know even the abc about blogging you can join our full blogging course.

Comments