Home
Blogging Guides

How to add Reading Progress Bar in Blogger ?

Views

How to add Reading Progress Bar in Blogger ?






Hi! Friends welcome to V-Tech Basu's website. So, today in this post I will explain about How to add Reading Progress Bar in Blogger ?

Codes for Reading Progress Bar for Blogger Template is available to download which you can avail from our website for free. Scroll down the page for more information.


Introduction


Reading Progress Bar is a one type of system which specifies the number of pages to be scrolled down. In which the user can realise how long the page is. Many Blogger users as well as WordPress users use this Bar for their website to look better then other's. It is a very helpful thing for the reader's. It also specifies the premium look of the website.


Features of it


  • Progress bar's height.
  • Foreground color.
  • Background color.
  • Position (top, bottom, custom).
  • Class/ID of HTML element to fix the bar (if custom position selected).
  • Page templates.
  • Post types (natives or custom).


How to place into your Blogger Theme ? Recommended to read the full article.


To place the Reading Progress Bar in Blogger follow all the steps below very clearly. But before editing the theme please take a backup of your current theme. 



Step 1.


Copy the below javascript and paste it above the closing body tag </body> ( Use Desktop for better editing )


<script>window.onscroll = function() {myFunction()};function myFunction(){var winScroll = document.body.scrollTop || document.documentElement.scrollTop;var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;var scrolled = (winScroll / height) * 100;document.getElementById(&quot;myBar&quot;).style.width = scrolled + &quot;%&quot;;}</script>  


Step 2.


Next copy the below CSS code and paste it above the ]]></b:skin>


.progress-container{width:100%;position:fixed;z-index:99}.progress-bar{height:5px;background:#F86152} 


Step 3.


Paste the HTML code below the <body> tag (In some template this tag would be adjoined with class or schema, so search for only <body )


<div class='progress-container'><div class='progress-bar' id='myBar'/></div>



Now almost you are done 👍 just need to customize you theme by yourself if you want so.


1st Customize


= Change the color of Reading Progress Bar if you want by searching html code background:#F86152 and replace it with your color code.

2nd Customize


= Change the height of your Reading Progress Bar by searching html code height:5px to your own choices.



Any Issues Appears Comment below ( Feel Free To Comment ) We will reply back within 12hrs. Thank You For Reading Full Hope you liked it. Please Do Share and also Do follow us. Thank You. See you soon.

Post a Comment