Blogger Sayfalar Arası Loading Eklentisi

Merhaba Arkadaşlar,
Youtube de gördüğümüz sayfalar arası geçişte ortaya çıkan loading çubuğunu bilmeyen yoktur. Bu eklenti ile hem YouTube'deki loading çubuğunu hem de sayfanın ortasında beliren yükleme animasyonunu ekleyebilirsiniz.

Uygulama : 

Şablon kısmından HTML'yi Düzenle butonuna tıkladıktan sonra Ctrl+F yapıp arama kutusuna </head> yazıyoruz ve entera tıkladıktan sonra çıkan kodun aşağısına şu kodu ekliyoruz :

<style> /* jQuery page loading effect by www.showmedreams.blogspot.com */ #md-loading {position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 100%; background: #FDFEF8 url(http://2.bp.blogspot.com/-kIrasdB82T0/U6eA_bnDmlI/AAAAAAAADzw/UUio00Tw4gM/s1600/Loader2.gif) no-repeat center; line-height: 350px; text-align: center; font-size: 36px; color: #353231; text-indent: -9999px; } .MD #md-loading { display: none; } @media only screen and (device-width: 768px) { #loading { position:absolute; width:1040px; min-height:768px; } } #md-progress-bar { position: absolute; top: 0; left: 0; background: #de1301; opacity: 0.8; width: 0; height: 18px; } #md-loader { height: 100%; display: none; } </style> <script> (function($){ $("html").removeClass("MD"); $("#header").ready(function(){ $("#md-progress-bar").stop().animate({ width: "25%" },1500) }); $("#footer").ready(function(){ $("#md-progress-bar").stop().animate({ width: "75%" },1500) }); $(window).load(function(){ $("#md-progress-bar").stop().animate({ width: "100%" },600,function(){ $("#md-loading").fadeOut("fast",function(){ $(this).remove(); }); }); }); })(jQuery); </script>

Daha sonra tekrar Ctrl+F yapıp arama kutusuna </body> yazıyoruz ve entera tıkladıktan sonra çıkan kodun aşağısına şu kodu ekliyoruz :

<div id='md-loading'><div id='md-progress-bar'></div><div id='md-loader'>Loading...</div></div>