Hello, Bloggers! Welcome to Raghavendra Technic.
You might be seen nowadays some of the websites using reading progress bar and you might be thing how to add a reading progress bar to your Blogger website. So we made a tutorial for you about how to add a reading progress bar in Blogger.
The reading progress bar helps users to read the complete post and if your website doesn't have a scroll bar then the reading progress bar will help your visitors to know if they reached the end of the page.
It will work when visitors scroll down on the page or post on your website it will move front. If visitors scroll up on the page or post it will move back.
Do you want to add a reading progress bar on your Blogger website? In my opinion, I will tell yes. And you might be thinking what are the reasons I already added reasons. I think you can now understand what are the reasons you want to add a reading progress bar on your Blogger website.
So now let's check how to add a reading progress bar on your Blogger website!
How to add a reading progress bar in Blogger?
Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, you will be redirected to editing page.
Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.
/* Reading progress bar (T_MK) */ .progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;} .progress-bar{height:2px;background:#6200EE;}Step 6: Now search the code <body> and paste the following HTML Codes just above to it.
To show on every place
<!--[ Reading progress bar ]-->
<div class='progress-container'>
<div class='progress-bar' id='BD-Bar' style='width:0%;'/></div>
To show only on posts
<!--[ Reading progress bar ]-->
<b:if cond='data:view.isPost'>
<div class='progress-container'>
<div class='progress-bar' id='BD-Bar' style='width:0%;'/></div></b:if>
Step 7: Now search the code </body> and paste the following HTML Codes just above to it.
<!--[ Reading progress bar JS ]-->
<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("BD-Bar").style.width = scrolled + "%";}</script>
Step 12: Now click on Save by clicking this icon
Step 13: That's done!
Conclusion
In this article I have made a tutorial on How to make Reading process bar. I hope you have liked it and Please do share with your friends and follow our blog for more
If you face any problems in code or have any questions please feel free to ask in comments section or join our Telegram Group for discussion.
Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © Raghavendra Technic | All Rights Reserved
© Copyright:
raghavendratechnic.blogspot.com