Home
Script

How to Add Progress Bar in Blogger Blog Like YouTube


How to add Progress Bar in Blogger Blog Like YouTube


What is Blogger Blog?

And if you're employed within the field of blogging. thus you must be attentive to the weblog. thus if you do not understand, let ME tell you that a weblog could be a reasonably online info store. And during which articles or posts square measure written on a spread of topics.

So a weblog is sort of a website. we will weblog and make on many various platforms. however speaking of platforms, in conjunction with Blogger, WordPress, Joomla, and Drupal, there square measure several alternative platforms offered for blogging.

What is a weblogger Blog Progress Bar?

And first, we'd like to grasp what's the progress bar? thus if we have a tendency to observe the progress bar, it is a feature line that keeps growing.

So let ME tell you that you simply may place this sort of progress bar in your weblog. If your weblog is on WordPress then you get some plugins. however, if your weblog is on Blogger, you will have some issues. as a result of this method, some scripts should be used. thus below I even have made public all the steps.

Progress Bar implementation Steps in Blogger

But no matter the steps I even have taken below. All of those steps square measure for the weblogger blog. And if you would like to place this progress bar in your weblog. Therefore, follow all the steps given below fastidiously.

1st Step – you need to 1st log in to your Blogger Dashboard.

2nd Step – you'll realize a code within the box below. And you've got to repeat this whole code.


<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",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||"#db3131";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>


4th Step - once your theme code opens, you will need to seek out the tag.

5th Step - currently the code you've got derived. And save this code by pasting it on the tag.

Change the component within the code.

Height: "2px" = Increasing the peak during this code can increase the thickness of the progress bar.

"#db3131" =  #db3131 could be a code. thus you'll modification the colour code as you would like.

Corollary

the way did you wish this text concerning adding a progress bar to a weblogger blog like YouTube? thus allow us to understand by commenting within the comment box below. And additionally, wish to create some reasonable suggestion. thus you'll share your opinion with the United States within the comment box below.

Post a Comment