Tạo hiệu ứng ĐANG TẢI trên header giống Youtube cho Blogspot

Hôm nay ngồi xem video trên Youtube, vô tình để ý cái hiệu ứng khi chuyển trang của nó ở trên header, thấy hay hay nên mò code, cuối cùng cũng thấy, mang về thêm vào cho blog thấy khá OK nên giờ ngồi viết bài chia sẻ cách tạo hiệu ứng ĐANG TẢI giống Youtube cho Blogspot

Tạo hiệu ứng ĐANG TẢI trên header giống Youtube cho Blogspot

Bạn nào chưa hình dung được nó là cái gì thì nhìn hình bên dưới nhé, để ý lên đầu ấy, cái đường kẻ đỏ nó load

Tạo hiệu ứng ĐANG TẢI trên header giống Youtube cho Blogspot

 

Các bước thực hiện

Copy đoạn code bên dưới rồi dán vào trước thẻ </body> trong template rồi Lưu lại là OK

<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||"#2980B9";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>

Lưu ý: Các bạn có thể thay đổi những thông số sau cho phù hợp với blog của mình
height:”2px” (Chiều cao của đường viền)
#2980B9 (Màu đường viền)

 

Tổng kết

Với một tips nhỏ đơn giản như vậy mình hy vọng blog của các bạn sẽ trông đẹp và chuyên nghiệp hơn, hiện tại ChamNhe.Com cũng đang sử dụng thủ thuật Blogspot này đấy!

Recommended For You

About the Author: Nguyễn Đức Anh

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé!

5 Comments

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *