How To Add Reading Progress Bar In Blogger?

Q: How Do I Add Reading Progress Bar In Blogger?

Step 1: Login to Blogger Step 2: Go to Theme > Edit HTML Step 3: Click anywhere in code area and press Ctrl + F Step 4: Search for ]]> Step 5: Copy the below code and paste just above the ]]> Step 6: Again press Ctrl + F and search for . Step 7: Copy the below code and paste it just below . Step 8: Again press Ctrl + F and search for . Step 9: Copy the below code and paste it just above . Now save the theme. You are done.

A reading progress bar in site assist client with figuring out the length of any post. It helps visitors to stick to our site and decreases the bounce rate. In this article you will come to know how to add reading progress bar in blogger site.

Thus, adding a reading progress bar assists readers with understanding the article better and clients need to stay for a longer time. In the end, it helps increasing your AdSense income.

How To Add Reading Progress Bar In Blogger?

What Is Reading Progress Bar?

A reading progress bar is a component on your website where you get to see your progress while reading an article. It helps you to scroll simply that piece more until you ultimately complete reading an article.

When you read an article, sometime you have seen a progress bar at the top of the page? The progress bar moves from one finish to the next as you look at the article.

It is a human tendency to finish work when you get to routinely see your improvement. You know, that second when you see you have simply 20% more to finish reading an article and you drive yourself to finish it.

Why To Add Reading Progress Bar In Blogger?

A reading progress bar helps an audience to understand how long a post to read. By the progression a reader stays longer than usual on a site.

Today we will know how to add reading progress bar in blogger? Reading progress bar that shows the progress of reading an article by increasing its length.

How Do I Add Reading Progress Bar In Blogger?

Step 1:

Step 2:

Go to Theme > Edit HTML

Step 3:

Click anywhere in code area and press Ctrl + F

Step 4:

Search for ]]></b:skin>

Step 5:

Copy the below code and paste just above the ]]></b:skin>

     .progress-container{width:100%;position:fixed;z-index:99}.progress-bar{height:5px;background:#F86152}

Step 6:

Again press Ctrl + F and search for <body>.

Step 7:

Copy the below code and paste it just below <body>.

     <div class='progress-container'><div class='progress-bar' id='myBar'/></div>

Step 8:

Again press Ctrl + F and search for </body>.

Step 9:

Copy the below code and paste it just above </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>

Now save the theme.

You are done.

Conclusion

Hope you have successfully added this code on your blog. If you like this way to add reading progress bar in blogger, please share it to your friends.

Attention! Ad blocker Detected!

How To Add Reading Progress Bar In Blogger?

Also Read

How To Add Reading Progress Bar In Blogger?

What Is Reading Progress Bar?

Why To Add Reading Progress Bar In Blogger?

How Do I Add Reading Progress Bar In Blogger?

Step 1:

Step 2:

Step 3:

Step 4:

Step 5:

Step 6:

Step 7:

Step 8:

Step 9:

Conclusion

Post a Comment

Recent Posts

Footer Copyright

buttons=(Accept !) days=(30)

Contact form

Attention! Ad blocker Detected!

How To Add Reading Progress Bar In Blogger?

Also Read

How To Add Reading Progress Bar In Blogger?

What Is Reading Progress Bar?

Why To Add Reading Progress Bar In Blogger?

How Do I Add Reading Progress Bar In Blogger?

Step 1:

Step 2:

Step 3:

Step 4:

Step 5:

Step 6:

Step 7:

Step 8:

Step 9:

Conclusion

You may like these posts

Post a Comment

Footer Copyright

buttons=(Accept !) days=(30)

Contact form