How to Install Progress Scrollbar on Blogger [Working]?
this time is actually not very important, it's different if your target is to make the site better and look beautiful, Then it's okay to use these tips.
What is a Progress Scrollbar?
As is the case with the progress bar when we copy and paste files on a computer or smartphone, during the copy-paste process it will display a progress bar of the time it takes to copy the file from the copied folder to another folder. As well as. The same thing with Progress Scrollbar on Blogger will display a horizontal line on the blog page, when we scroll the page it will display a horizontal line and the length of the line will extend to where the page is scrolled.
How to Install Progress Scrollbar on Blogger?
For those of you who are interested in installing it, you can follow the Guide below.
Open Blogger Dashboard > Click Theme Menu and Click On Edit Html Next To Customize>
Add This Code Before </body>
<script type='text/javascript'>
//<![CDATA[
// Progress Scrollbar
$(document).ready(function(){var n=function(){return $(document).height()-$(window).height()},o=function(){return $(window).scrollTop()};if("max"in document.createElement("progress")){(r=$("progress")).attr({max:n()}),$(document).on("scroll",function(){r.attr({value:o()})}),$(window).resize(function(){r.attr({max:n(),value:o()})})}else{var e,t,r=$(".progress-bar"),i=n(),c=function(){r.css({width:(e=o(),t=e/i*100,t+="%")})};$(document).on("scroll",c),$(window).on("resize",function(){i=n(),c()})}});
//]]>
</script>Next, Add This Code Bellow <body>
<progress value='0' max='1'>
<div class='progress-container'>
<span class='progress-bar'></span>
</div>
</progress>Add This Code Before </head>
<style type='text/css'>
/* Progress Scrollbar */
progress{position:fixed;left:0;top:0;width:100%;height:3px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background-color:transparent;color:#f39c12;z-index:1000}
progress::-webkit-progress-bar{background-color:transparent;z-index:10}
progress::-webkit-progress-value{background-color:#f39c12;z-index:10}
progress::-moz-progress-bar{background-color:#f39c12;z-index:10}
.progress-container{width:100%;background-color:transparent;position:fixed;top:0;left:0;height:3px;display:block;z-index:10}
.progress-bar{background-color:#f39c12;width:0%;display:block;height:inherit;z-index:10}
</style>Note: Edit on the marked section to change the color, position, and height of the Progress Scrollbar.
You're Done! Click One Save Theme Button. To see the results please check on your blog.