Tạo hiệu ứng loading giống Youtube cho blogspot

By Unknown

Thứ Bảy, 15 tháng 11, 2014

Làm thế nào để chèn hiệu ứng loading giống Youtube cho blogspot ? Code loading Youtube cho blogger .
Nói đến Youtube chắc ai củng biết và các bạn vào trang này xem các video hoặc bấm sang xem video khác các bạn để ý phía trên có hiệu ứng loading trang màu đỏ nhìn rất bắt mắt và chuyên nghiệp.
Còn blogspot có làm được điều không ? Câu trả lời được chứ chỉ cần một đoạn Javascript chèn trước thẻ </body> là xong thôi à.

Xem thêm: Một số hiệu ứng loading cho blogger

Tạo hiệu ứng loading giống Youtube cho blogspot

Quá đơn giản phải không các bạn, những ai có như cầu làm đẹp template nhất là demo loading giống Youtube thì sử dụng đoạn Javascript bên dưới nhé

Code loadging Youtube

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

Video hướng dẫn

Sau khi chèn xong hiệu ứng loading giống Youtube xong các bạn lưu lại và xem kết quả nhé . Chúc các bạn thành công !

Tag : Javascript