These are the friends! Hope you are doing well. This is not really important, but if your goal is to make the site look better and more beautiful, then these tips are worth using. So let's find out how to add a progress loading scrollbar to Blogger.
How To Add Progress Loading Bar To Blogger Website.
 |
| How To Add Progress Scrollbar To Blogger Site |
What is a progress loading bar?
In the case of the progress bar, just as we copy and paste files into a computer or smartphone, during the copy-paste process it will display a progress bar that usually takes time to copy the file from the copied folder to another folder. Like the progress scrollbar on Blogger, which will display a horizontal line on the blog page, it will display a horizontal line when we scroll the page, and the line length will extend to where the page is scrolled.
How to add progress loading bar on blogger website?
For those of you who are interested in adding it, you can follow these tips below.
- Open Blogger Dashboard
- Click Theme List
- Click Edit HTML
- Click on the box and search
- Add this code first
<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>Then, add this code below the code
<progress value="0" max='1'>
<div class="progress-container">
<span class="progress-bar"></span>
</div>
</progress> Add this code before next
<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:#ff0065;z-index:10}
progress::-moz-progress-bar{background-color:#ff0065;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:#ff0065;width:0%;display:block;height:inherit;z-index:10}
</style>
Click the Save Theme button and you're done! Results can be checked on your blog.