Follow Me on Google News Follow Now!

How To Add Reading Progress Bar in Blogger Website

Hello Everybody, Welcome back in my Blog. Today, We are going to disqus that How To Add Progress Bar in Blogger Website when scrolling the web page. This tutorial make your website more beautiful by adding progress bar in blogger. Now we are going to tell what is progress bar in blogger website ?

What is 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. So now we will know the features of this light weight progress bar.

Features Of Progress Bar —

  • In this progress bar no need to add JQuery.
  • The JavaScript is very concise and there is no file pointing outside of blogspot.
  • In this progress bar i used basic CSS.
  • This progress bar also simple and fast like median ui blogger theme.
  • This progress bar working with all types of browsers.

How To Add A Top Reading Progress Bar in Blogger Website —

Warning!
Before starting this tutorial, make sure you have to back up your blogger template first.

How To Add Progress Bar CSS code in Blogger Website —

  1. First, Go to Blogger Dashboard
  2. Go to Theme/Template Section
  3. Now Click on Edit HTML
  4. Now Search for </head>tag
  5. To find anything in blogger theme section press Ctrl+F buttons and then type term to search and press enter.
  6. Copy the code provided below and paste it above </head> tag.

<style>
/* Progress Reading Bar in Blogger Website */
.progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}
.progress-bar{height:5px;background:#F86152;}
</style>

How To Add Progress Bar Javascript code in Blogger Website —

  1. Now, Go to Blogger Dashboard
  2. Go to Theme/Template Section
  3. Now Click on Edit HTML
  4. Now Search for </body>tag
  5. Copy the code provided below and paste it above </body> tag.

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

How To Use Reading Progress Bar in Your Blogger Website —

  1. To use Progress bar in website, Go to Blogger Dashboard
  2. Go to Theme/Template Section
  3. Now Click on Edit HTML
  4. Now Search for <body>tag
  5. If you are not able to find the <body> tag then you should find the <body tag only..
  6. Copy the code provided below and paste it below the <body> tag.

<div class='progress-container'>
<div class='progress-bar' id='myBar' style="width:0%;"></div>
</div>

Now Save your Theme And see the results in below of the browser's address bar.

Conclusion —

Well, that's the discussion this time about How To Add Reading Progress Bar in Blogger Website Without JQuery and this version is lighter and simpler.

If you face any problem and err you can put up your comment in to comment section.

Happy Blogging...

Getting Info...
Adatun Provides Blogger Tips, Seo Tips, Blogging Tips, Adsense Tips, Best Blogger Template Updates, Html, Css, Javascript and More.

Blog: Adatun Blog

Post a Comment