How to

Add Reading Progress Bar For Blogger Blog

The tips from Blogger Funda this time aren’t really that important, another if your goal is to make the site more okay and look beautiful, it’s OK to use these tips.

Reading Progress Bar For Blogger Blog
Reading Progress Bar For Blogger Blog
What is Progress Scrollbar? As with the progress bar when we copy and paste files on a computer or smartphone when the copy paste process will usually display the progress bar of the time needed to copy the file from the folder copied to another folder. Similar to Progress Scrollbar on Blogger, it will display a horizontal line on the blog page when the page we scroll will display a horizontal line and the length of the line will extend along to where the page is rolled.

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 under the code <body>

<progress value='0' max='1'>
   <div class='progress-container'>
      <span class='progress-bar'></span>    
   </div>
</progress>
Then 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 in the marked section to change the color, position and height of the Progress Scrollbar.

Click the Save theme button and finish! To see the results can be checked on your blog.

Load Progress Bar

The way it works from Load Progress bar is to display the horizontal line above when 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>

Edit in the marked section to change the color and height of the Load Progress Bar.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Close