How To Add Progress Bar in Blogger With These Simple Steps !

Table of Contents :
1. Intro (pg1)
2. Steps To Add Progress Bar in Blogger (pg2)
3. How To Customize the Progress Bar (pg3)
4. What is the Features of This Progress Bar (pg4)
5. Conclusion (pg5){alertInfo}

Intro

Hi guys ! Today I will be showing how to add progress bar in Blogger templates with these simple steps !Please keep reading and follow every single steps to prevent any mistakes .

{getButton} $text={Demo} $icon={preview} $color={Hex Color}

Steps To Add Progress Bar in Blogger

Save your template (in case you can use the template again if you accidentally did something wrong )
Click 'Edit HTML'
Click anywhere you want
Press [CTRL+F] and type </body>
Copy the code below and paste it on top of </body>
<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>
Press [CTRL+F] again and type ]]>
Copy the code below and paste it before /on top of ]]>
<style> .progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;} .progress-bar{height:5px;background:#F86152;} </style>
Press [CTRL+F] again and type <body>
Copy the code below and paste it after <body>
<div class='progress-container'> <div class='progress-bar' id='myBar' style="width:0%;"></div> </div>
Save the template

How To Customize the Progress Bar ?

To change the color edit the background:#F86152 and replace it with your preferred color code.Click here to choose the colour code .And to change the size of your progress bar edit height:5px and replace the 5px.

What Is The Features of This Progress Bar ?

Simple And Quick Load.
Can Work With Any Browser.
No JQuery File Added.
Basic CSS Added.
JavaScript Little Snippet Added But No External File.

Conclusion

This is all about today's tutorial .Please share if you think it is helpful .Have questions ?Let me know in the comment and I will try my best to answer all of them .Happy reading !