How to Add Reading Progress Bar in Blogger | Top Bar
Hello Guys, Welcome to ASThemesWorld. Today we will learn How to Add Reading Progress Bar in Blogger. This is just a simple process, you don't have to do much, just add some codes to your theme.
Reading Progress Bar in website gives the idea about the length of the article. Reading Progress Bar feature give readers an indication of how far along they have read a blog post or page article.
How to Add Reading Progress Bar?
We will add the reading progress bar in three steps and all three steps are easy.
Step 1. Adding CSS Code
Look for the code ]]></b:skin> and paste the following CSS codes above it.
.progress-container{width:100%;position:fixed;z-index:99}
.progress-bar{height:3px;background:#eb345b}If you want to chage the color of Progress Bar then change background:#eb345b and for changing the size of progress bar change the code height:3px;.
Step 2. Adding JavaScript
Search the code </body> tag in your theme and paste the following JavaScript Code above it.
<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("myBar").style.width = scrolled + "%";}</script>Step 3. Adding HTML Codes
Now search the <body> tag and paste the following HTML Code just below it.
<div class='progress-container'>
<div class='progress-bar' id='myBar'/></div> If you follow the steps carefully then the Reading Progress Bar is working properly. If you face any problem while adding this then please write down your problems through the comments column provided.
If you find this article helpful then please share and give your feedback in comment section.
© Copyright ASThemesWorld