Notification texts go here. Contact Us Buy Now!
$10.00
10
$000

Get your blog ready With details you won't find anywhere.

How To Create Progress Bar Effect For Blogspot

abdalrahman
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
instructions-for-creating-progress-bar-effect-when-scrolling-page-for-blogspot



What is the Progress Bar?

Have you noticed some websites showing progress bars at the top of their articles? This little bar tells users how much of the article is left to scroll and encourages them to keep reading. In this article, I will show you how to add a reading progress bar in blogspot posts.
Features:
  • No need to add JQuery
  • The JavaScript is very concise and there is no file pointing outside of blogspot
  • Basic CSS
  • Simple and fast
  • Works with all browsers



Instructions for creating progress bar when scrolling for Blogspot
1. Login to Blogger
2. On Blogger dashboard , Select Theme Edit HTML
3. Find the </body> tag and paste the below script above it
<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>

4. Next, find the  ]]></b:skin> tag and paste the CSS above it
/* Progress Bar TLTeam */.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}.progress-bar{height:5px;background:#F86152;}

5. Find <body> or <body tag and paste below code below it
<div class='progress-container'><div class='progress-bar' id='myBar'></div></div>

Finally save it and try it out.
If you have any problems, please comment below.
Read Also

Getting Info...

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.