Reading Progress Bar For Blogger Blog 2020 Blogger Tips

Reading Progress Bar For Blogger Blog 2020 Blogger Tips

Normally, such a Reading Position Indicators are used on blog posts or long-form articles and help users to understand how far they are from finishing the reading but you may also find it Chrome's android application in the form loading bar (and Apple's browser Safari, a very similar-looking loading bar).

Reading Progress Bar For Blogger Blog 2020 Blogger Tips

Principle Behind This Technique

The developer of plugins uses the simple technique by following the fact that the user must have to scroll the page if he/she wishes to read the complete article or browse the whole webpage. The technique he used revolves around the scroll event which is likely to be the key to determine an approximate position of the reader.

In this post, we will learn how to add Reading Position Indicator to blogger blog, to apply it we have to follow the simple steps:

• Sign in Blogger > Template > Backup template
• Click "Edit HTML"
• Just above

1. Just above </head> tag paste the following source link:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script type='text/javascript'>//<![CDATA[
$(document).ready(function(){     var getMax = function(){        return $(document).height() - $(window).height();    }     var getValue = function(){        return $(window).scrollTop();    }     if('max' in document.createElement('progress')){        // Browser supports progress element        var progressBar = $('progress');             // Set the Max attr for the first time        progressBar.attr({ max: getMax() });
        $(document).on('scroll', function(){            // On scroll only Value attr needs to be calculated            progressBar.attr({ value: getValue() });        });           $(window).resize(function(){            // On resize, both Max/Value attr needs to be calculated            progressBar.attr({ max: getMax(), value: getValue() });        });     }    else {        var progressBar = $('.progress-bar'),            max = getMax(),            value, width;             var getWidth = function(){            // Calculate width in percentage            value = getValue();                     width = (value/max) * 100;            width = width + '%';            return width;        }             var setWidth = function(){            progressBar.css({ width: getWidth() });        }             $(document).on('scroll', setWidth);        $(window).on('resize', function(){            // Need to reset the Max attr            max = getMax();            setWidth();        });    }});$(document).ready(function(){
$('#flat').addClass("active");$('#progressBar').addClass('flat');
$('#flat').on('click', function(){$('#progressBar').removeClass().addClass('flat');$('a').removeClass();$(this).addClass('active');$(this).preventDefault();});
}); //]]></script>

2. Search for following the code or somewhat similar:

<b:includable id='post' var='post'> <article class='post hentry'>

Note: You may not be able to find the same code, but you have to the below code just before starting your article content to allow.

3. and add the following code just below the code above or the below the code similar to it:

<progress id='progressBar' value='0'><div class='progress-container'><span class='progress-bar'/></div></progress>

Great! Now it's time to stylize the progress bar, so let's add some spicy CSS code to our template StyleSheet.

4. Search for the following line of code:

]]></b:skin> 

5. Finally, add the following code just above the code:

/* reading position indicator */progress {  /* Positioning */  position: fixed;  left: 0;  bottom: 0;  z-index: 101;
  /* Dimensions */  width: 100%;  height: .25em;
  /* Reset the apperance */  -webkit-appearance: none;     -moz-appearance: none;          appearance: none;
  /* Get rid of the default border in Firefox/Opera. */  border: none;
  /* For Firefox/IE10+ */  background-color: transparent;
  /* For IE10+, color of the progress bar */  color: red;}
progress::-webkit-progress-bar {  background-color: transparent;}
.flat::-webkit-progress-value {  background-color: red;}
.flat::-moz-progress-bar {  background-color: red;}

.progress-container {  width: 100%;  background-color: transparent;  position: fixed;  top: 0;  left: 0;  height: .25em;  display: block;}
.progress-bar {  background-color: red;  width: 50%;  display: block;  height: inherit;} 

We have options to change the color of the progress bar if you want:

• To change the background color of progress bar edit background-color: red;
• To change the height of the progress bar edit height: .25em;

 We have options to change the color of the progress bar if you want:

The credit of this plugin goes to Pankaj Parashar, he wrote the great in-detail article on CSSTricks. 

I would love to hear your feedback on this little effort. I tried my best to create a user-friendly tutorial but if there is anything troubling you, please don't hesitate to ask your question in the comment form below, would love to solve as soon as time allows. Peace & Blessing! :)