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>
Post a comment
Please do not enter any spam link in the comment box.