https://www.idblanter.com/search/label/Template
https://www.idblanter.com
BLANTERORBITv101

How to Install a Progress Scrollbar on Blogger Least

Saturday, December 12, 2020

The tips from this time are actually not that important, if your goal is to make the site better and look beautiful, it's okay to use these tips. Dn420 

What is the Progress Scrollbar?

 As with the progress bar when we copy and paste files on a computer or smartphone, during the copy and paste process it will usually display a progress bar of the time it takes to copy the file from the copied folder to another folder. Similar to the which will display a horizontal line on the blog page, when the page is scrolled it will display a horizontal line and the length of the line will extend to follow where the page is scrolled. Progress Scrollbar in Blogger.

 How to Install it ?

For those of you who are interested in installing it, you can follow the tips below. 


  • Open the Blogger dashboard  
  • Click the Themes menu and Edit HTML >
  • 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>

  • Add this code below the code <body>


<progress value='0' max='1'>
   <div class='progress-container'>
      <span class='progress-bar'></span>    
   </div>
</progress>

  •  Next 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>

 Edit the highlighted sections to change the color, position and height of the Progress Scrollbar.

Click the Save theme button and you're done! To see the results you can check on your blog. 

Load Progress Bar 

The way the Load Progress bar works is to display a horizontal line at the top while the page is loading. For those of you who only want to install the Progress bar when the page loads, you can add this code before </body>


<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"4px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=
a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#f39c12";this.bars=[];b=this.el=document.createElement("div");c(this.el,
k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();
var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);
//]]>
</script>

  • Congrats:) How to Install a Progress Scrollbar on Blogger Least is Ready to Use.

  • From Author: - How did you like this article of How to Install a Progress Scrollbar on Blogger Least. You must tell us by commenting in the comment box below. Or if you want to give some kind of suggestionion, you can share your opinion with us in the comment box below.

 


  •  Disclaimer: This site does not store any files on its server. All contents are provided by non-affiliated third parties.

Copyright©Dn420


Author

Droidnur

0 comments