How to Put Reading Progress Bar in Blogger this 2022

How about my blogger people, in this SEOBlogAriel.Online entry I bring you a simple tutorial to add a Reading Progress Bar in Blogger.

Reading Progress BAR has the purpose of making the user who visits your website see when he scrolls down how far his reading progress is going within the Blog.

{getToc} $title={Table of Content}


reading progress bar

How to install Reading Progress Bar on Blogger

What we are going to need to add the progressive reading bar to our blog is going to be:

  • Login to Blogger
  • Click on Themes
  • Personalize
  • Edit HTML

Once in the Blogger HTML template you will need:

Copy the style sheet

Insert the following CSS3 code between the <head> </head> tag in your Blogger template:


<link rel="stylesheet" id="t42-reading-progress-reading-progress-css" href="https://dl.dropboxusercontent.com/s/sqmp40ta7xkqx7k/reading-progress.min.css" type="text/css" media="all">

Copy the JavaScript

Add the JavaScript(JS) to the end of the Blogger template, before the </body> tag


<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/xmswi4a725z670i/ScriptProgressBar.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/v0cfr3ubpb8ewdk/scrollProgress.min.js" id="t42-reading-progress-scrollProgress-js" defer=""></script>

Add the DIV in Blogger

The following DIV Code contains the style of the HTML reading progress bar. You can place it at the beginning of the <body> tag or even at the end before the </body> tag. Anywhere in the body of the template.


<div id="t42-reading-progress-wrapper" class="t42-style-rounded"><div id="t42-reading-progress" style="height: 10px; position: fixed; top: 0px; background: linear-gradient(90deg, rgb(40, 168, 90) 0%, rgb(15, 220, 95) 100%); width: 0%;"></div></div>

Adjustments you can make to the Reading Progress Bar

Inside the Div you can adjust the following:

  • Style : Choose the styles offered by the plugin: Default, Rounded, Plastic, Animated, Shine, Glow. Modify the bar animation in the class="t42-style-rounded" part of the class .
  • Color : Change the color of the bar to your preference. From a fixed color or Gradient. You can modify it in the line of code:  background: linear-gradient(90deg, rgb(40, 168, 90) 0%, rgb(15, 220, 95) .
  • Position : You can indicate whether the bar is displayed at the top or bottom of the page. You can modify it by putting in the following code top or bottom. position:fixed; top
  • Heigh : Changes the size of the bar by placing a different value than the default. Modify the line of code:  style="height: 10px

Download Reading Progress Bar HTML, JS and CSS

If you want to host this amazing reading animation plugin for your website, then I am sharing it with you to use for your own project.

Download the Documents from the following link and follow the instructions on this blog.

Reading Progress Bar Installation Guide



Publicar un comentario

Déjame un mensaje.

Artículo Anterior Artículo Siguiente

نموذج الاتصال