How to add a New Reading progress bar on a blogger [100% Working] website
Hello Buddy, today let's see How to add a Reading progress bar on a blogger website just follow the simple few steps below on the content. you can modify a few scripts on your blogger theme you can get this element on your blogger website.
This script is Completely Safe to use. this script can not use any minimized JS script or any Third-party Application. so, you can not need and javascript and 3-rd party application to install this Reading the progress bar on a blogger. so, you can't use any unnecessary JS file and can not lose your website Speed on this script. so, your Website keeps bringing faster.
we provided the universal script for add a Reading progress bar on any blogger or Blogspot.com website. this script size is very similar to compare to other WordPress sites. and this script gives good look at your blog.
The Reading Progress Bar is helping to easily understand the size of your blog post and gives a good user experience on visitors. It also helps to increase your blog experience and May be increase your blog bounce rate.
What is Reading Progress Bar?
the reading progress bar shows the current location of the reading place on the post. It helps to be easy to understand and a good experience for the user. and it helps users spend more time on the blog post. so, this script is literally optimized your website bounce rate.
How to Work Reading Progress Bar?
The Reading Progress Bar is shown in the header section of your blog. Users do scroll page the progress bar automatically increase size one end another end on the header section. so, users can understand the current page size and balance page size easily. this is a simple script so you do not worry it"s not affected your page loading Speed.
Benefits of reading progress bar
- increase bounce rate
- give a professional look at your blog
- user spend more time on your page
- user can understand page size
You want to add this script to your blogger website. incase sometimes you can face an error on your website. so, you can backup your blogger theme on your device. because you make any mistake in installing the script then you easily backup your theme. next, you follow a few steps below to install the progress bar on your Blogger website. First Hit the Download Button and Download the script Files on your Device.
How to Setup Reading progress bar on a blogger Step By Step
Step 1: Go to your blogger dashboard
Step 2: Open theme section on Blogger Sidebar
Step 3: Select Edit Html Option on blogger
Step 4: Press CTRL+F and find the </body> Tag.
Step 5: Copy the JavaScript script on the downloaded file
<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("Pixabin-Bar")
.style.width = scrolled + "%";}</script>Step 6: Paste the JS Script above on </body> tag.
Step 7: Again press CTRL+F and find the ]]></b:skin> Tag.
Step 8: Next copy the CSS script on the downloaded File.
.Pixabin-progress-container{width:100%;position:fixed;z-index:99}
.pixabin-progress-bar{height:5px;background:#F86152}
Step 9: Paste the CSS Script Above On ]]></b:skin> Tag.
Step 10: Again, Press CTRL+F and find the <body>tag.
Step 11: Copy The below Script and paste below <body>Tag.
<div class='Pixabin-progress-container'><div class='pixabin-progress-bar' id='Pixabin-Bar'/></div> Step 12: Save all changes
Step 13: well done. your blog is ready to show Reading Progress Bar on a blogger.
Custom Modification
- If you want to change the process bar color replace the background:#F86152 on the script.
- you want to change the process bar by changing height:5px to make your custom size on the Reading process bar.
Video Guide 👇
Final Words
l hope this article "How to Add a Reading Progress bar on a blogger website" is Helps you. and helps to improve your website user experience. then thank you read this article and share this article with other people. Thank you !!!