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 !!!