Hey There,
Now you can easily add a reading progress bar in your blogger website just by pasting some lines of code in your blogger dashboard theme section.
This guide covers all the necessary steps and codes that you have to paste in your theme to add a stylish reading progress bar in your blogger website without a third-party tools.
As you know adding third-party tools in our blogger website results slow pagespeed that cause errors in core web vitals in search console. Keeping this in mind we present you the highly optimized universal code for reading progress bar. This reading progress bar is suitable for any type of website or blog. It will also gives professional look to your website.
 |
| How to Add a Reading Progress Bar in Blogger |
Reading progress bar is very useful in blogs It gives an idea to your potential readers about the length of your blog post.It also helps in attracting user interaction and eventually reduces your bounce rate.
Now, I hope you will get rough idea of the importance of reading progress bar. So, Let's back to the question How to add a reading progress bar in blogger websites?
Suggestion: Before proceeding with any of these steps given below, ensure that you have downloaded a back-up of your theme. If you make a little mistake in implementing the code then you can easily back to the original state just by uploading the backup theme. After that read the instructions again and try to implement the code carefully.
How to Add a Reading Progress Bar in Blogger
You need to follow these simple three steps to add a reading progress bar to your blogger website.
- STEP 1 : Copy the below optimised javascript code and paste it just above the closing body tag </body>
<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 2 : After that copy the below CSS and paste it above the ]]></b:skin>
.progress-container{width:100%;position:fixed;z-index:99}.progress-bar{height:5px;background:#F86152}
- STEP 3 : Copy the below HTML code and paste it just 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 you complete all the necessary steps. Just save your theme and your reading progress bar is start showing on your logger website.
Customization of Reading Progress Bar
You can do further customization of your reading progress bar if you want like change the color of the progress bar.
Just change the color code in the Step-2 background:#F86152 and replace it with your color code.
You can also change the thickness of your progress bar by changing height:5px to your preferred size.
Post a Comment