 |
| How to add Progress Bar in Blogger Blog Like YouTube |
What is Blogger Blog?
And if you work in the field of blogging So you must be well aware of the blog So if you don't 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
So a blog is like a website And we can create blogs on many different platforms But when it comes to platforms, Blogger, WordPress, Joomla & Drupal as well as many other platforms are available for creating blogs.
What is Blogger Blog Progress Bar?
And first of all we know what is Progress Bar? So speaking of Progress Bar, it is a feature line that grows. As you may have noticed, like YouTube, if you open it in Desktop Mode, you will see a red Progress Bar at the top. Will get |
So let me tell you that you can also put this type of Progress Bar in your blog. If your blog is on WordPress then you get some Plugins. But if your blog is on Blogger then you may have a little trouble Because in this process some script has to be used So below I have explained all the steps
Progress Bar implementation steps in Blogger
But whatever steps I have given below All those steps are for Blogger Blog And if you want to put this Progress Bar in your blog So follow all the steps given below carefully
Step 1 - First you need to log in to your Blogger Dashboard
Step 2 - You will find a code in the box below And you have to copy 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>
Step 4 - When your theme code opens, you have to search for </body> tag
Step 5 - Now the code you copied And save that code by pasting it over the </body> tag
Replace Eliment in Code
height: ”2px” = Increasing the height in this code will increase the Thickness of Progress Bar
“# Db3131” = # db3131 is a Color Code So you can change the color code of your mind with it
Conclusion - And how did you like this Add Progress Bar in Blogger Blog Like YouTube article? So you must tell by commenting in the comment box below. And also want to give some kind of suggestion So you can share your opinion with us in the comment box below.
ডোমেইন হোস্টিং সার্ভিস এই লিংকে চাপ দিন ।
ওয়েব ডিজাইন সার্ভিস এই লিংকে চাপ দিন ।
গ্রাফিক্স ডিজাইন সার্ভিস এই লিংকে চাপ দিন ।
ডোমেইন চেকার এই লিংকে চাপ দিন ।
