|
| reference:thekingdomofknowledge.in |
Table of Contents
- What is Progressive Reading Bar?
- Advantages of Progressive Reading Bar
- Disadvantages of Progressive Reading Bar
- How to Add a Top Reading Progressive Bar in Blogger Blog
- How to Add Progressive Bar CSS Code in Blogger Blog
- How to Add Progressive Bar JavaScript Code in Blogger Website
- How to Use Reading Progressive Bar in Blogger Website
- Conclusion
What is Progressive Reading Bar?
Have you ever noticed some top websites showing Progressive Reading Bar while
scrolling down the page? This progressive bar tells reader about how much
article is left for reading and also encourages them to read the complete
article. In this article, you will learn how you can enable progressive
reading bar in blogger posts. First, let us see the advantages and
disadvantages of progressive reading bar.
Advantages of Progressive Reading Bar
- No need to add JQuery.
- The javascript is very short.
- There is no file pointing outside of blogspot.
- In this progressive bar only basic is CSS used.
- The progressive reading bar is very fast and simple just like the Fletro and Median UI blogger templates.
- This progressive bar works with all types of templates.
Disadvantages of Progressive Reading Bar
Well, I don't see any disadvantages of this progressive bar. Infact, there are
only advantages written above and more. This will not harm the template or
content in any way and never the less it would not decrease the site speed. I
personally use this in my blog.
How to Add a Top Reading Progressive Bar in Blogger Blog
Warning!
Before starting this tutorial, make sure you have backed
up your blogger template first. Then start following the tutorial.
How to Add Progressive Bar CSS Code in Blogger Blog
- Go to Blogger Dashboard
- Go to Theme/Template Section
- Backup Your Theme (incase an error occurs)
- Click on Edit HTML
- Now Search for </head> tag
To find anything in blogger theme section press Ctrl+F buttons and then type term </head> to search and press enter.
- 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 Progressive Bar JavaScript Code in Blogger Website
- Login to Blogger Dashboard
- Go to Theme/Template Section
- Click on Edit Html
- Now Search for </body> Tag
- Copy the Code Given 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 Progressive Bar in Blogger Website
- To use reading progressive bar, login to blogger dashboard first.
- Go to Theme/Template Section
- Click on Edit Html
- Now, Search for <body> Tag
- If you are unable to find <body> tag then find <body tag instead.
- Now, Copy the Code Provided Below and Paste it Below <body> Tag
<div
class='progress-container'>
<div
class='progress-bar'
id='myBar'
style="width:0%;"></div>
</div>
Now save the theme and see results in your blog in any browser's
address bar.
Conclusion
Well that's the tutorial for Adding and Enabling Reading Progressive Top Bar in Blogger Website and Posts.
If you face any problem while applying the codes or any error occurs, then you can tell in comments.