Blogger

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…

Hung.Pro.VN

Developer Windows

---

• 19/05/2017
• Views

• #Blogger
• #Javascript

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

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

Cách 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

<!--code tạo loading tren header giong youtube bomkhung.info-->
<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"3px",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||"#FF0000";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:"3px" (Chiều cao của đường viền)
#FF0000 (Màu đường viền)

Nguồn : PhanHung.Info

Previous post

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

Next post

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

Related post

---

Hung.Pro.VN

Nhà thiết kế Web

View Articles

Tôi là admin trang Hung.Pro.VN là một người có đam mê với Blogspot, kinh nghiệm 5 năm thiết kế ra hàng trăm mẫu Template blogpsot như" Bán hàng, bất động sản, landing page, tin tức...

Share this article