Sayfanın En Üstüne Youtube Tarzı Yükleniyor Barı Ekleme

Sayfanın En Üstüne Youtube Tarzı Yükleniyor Barı Ekleme

Bir çoğumuzun günde defalarca ziyaret ettiği popüler video paylaşım sitesi Youtube'yi ilk ziyaretimizde veya herhangi bir video açtığımız sayfanın en üstünde site veya video yüklenirken şık bir yükleme barı defalarca dikkatimizi çekiyordur işte bu yazımızda Blogger eklentileri  kategorisinde Youtube'nin kullandığı bu şık yüklenme barını sizde bloglarınıza ekleyerek blogunuza küçük bir dokunuşla değişik bir görünüm kazandırabilirsiniz.



Blogger kumanda panelinize girerek  Yerleşim > Şablon > HTML’yi Düzenle yolunu izleyin ve Ctrl+F tuş kombinasyonun yardımıyla arama kutusunu açıp  </body> satırın bulun. Bu satırın üzerine kodları ekleyin.

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

Özelleştirme

* Yükleme çubuğunun kalınlığını ayarlamak isterseniz: height:"2px" değerini değiştiriniz
* Yükleme çubuğunun Rengini değiştirmek isterseniz a.bg=a.bg||"#db3131"kodunu bulup bunun yerine kendi kullanmak istediğiniz renk kodunu ekleyiniz.

Konuyla ilgili sorularınızı yorum bölümünden sorabilirsiniz.

Daha Fazlası: RSS Feed | Email Aboneliği Yayın Sayısı :