Wikitechlibrary

Add Like YouTube Progress Bar in Blogger

Hello friends! Today in this article we are going to talk about adding Progress Bar in Blogger Blog Post. And how to add progress bar like YouTube in blogger. We will know all these things in detail to this article. So stay with this article to know in more detail.

 

What is Blogger Blog?

If you work in the field of blogging. So you must be well aware of the blog. So if you do not know, then let me tell you, Blog is a kind of online information store. And in which articles or posts are written on different types of topics.

 $ads={2}

A blog is like a website. We can make and Blog on many different platforms. Talking about but Platform, Blogger, WordPress, Joomla & Drupal, along with many other platforms are also available to create a blog.

 

What is Blogger Blog Progress Bar?

First of all, we know that what is Progress Bar? The Progress Bar is a Feature Line which increases. As you might have noticed, if you will open YouTube in Desktop Mode, then on the top you will see a red-coloured Progress Loading Bar.

You can also want to put this type of Progress Bar in your blogger Blog. If your blog is on WordPress then you get some plugins and take it. But if your blog is on Blogger then you may have some problems to run this progress loading bar. Because some scripts have to be used in this process. Below I have explained all the steps to run this.

$ads={2}

Steps to implement Progress bar in Blogger

Below all the steps are explained. All these steps are for the blogger blog. If you want to install this progress bar in your blog. Then follow all the steps carefully.

Step 1 - Firstly, log in to your Blogger.com Dashboard.

Step 2 - Copy this code given below

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

Step 3 - After the copy, this code then Go to theme Section and click on Edit HTML 

Step 4 - After the open theme in HTML, Press Ctrl + F, you have to search </body> tag.

Step 5 - Now paste the copied code above of </body> tag and then click on save the theme icon.

$ads={2}

Replace Element in Code

height: "2px" = Increasing the height will increase the thickness of the progress bar.

"# Db3131" = # db3131 is a colour code. You can change the colour code on your choice.