Blogger Yükleniyor Eklentisi

"Yükleniyor" efekti, yukarıdaki resimdeki sayfa yüklenirken bir işlem çubuğunu gösterir. Bu etki web sitesi için çok faydalıdır. Web sitenizin yükleme süresi çok uzunsa, okuyucular web sitenizin kapalı olduğunu düşünebilir ve başka bir web sitesi bulabilir, ancak bir yükleme çubuğu eklemek durumunda, okuyucular sayfanın işlendiğini ve beklemeye devam edebileceğini düşünebilir tam sayfa yüklenene kadar biraz. Yükleme efekti oluşturmanın birçok yolu var, bu yazıda, en kolay yolu tanıtmak istiyorum, işte web tasarımınıza uygulayabileceğiniz bazı fikirler ve yükleme efektlerinden ilham alın. Bu efektleri blogcu blogunuza nasıl yükleyeceğinizi deneyelim.

Jquery<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Uyarı Mesajı: Aşağıdaki Satırlarda Dikkat Gerekiyor.

JQuery zaten şablonunuzdaysa, artık kopyalamayın, çünkü jQuery birden fazla ise blog yükleme yavaş olacaktır.

Şimdi, blogcu şablonunuzdaki bu kod barışını tekrar arayın ]]></b:skin> veya </style> Ctrl + F ile birlikte Aşağıdaki CSS kodunu kopyalayın ve hemen üzerine yapıştırın ]]></b:skin> veya </style>

CSS#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:#FFFFFF url('URL Here') no-repeat 50% 50%;

padding:1em 1.2em;
display:none;
}

Şimdi sıra geldi son kodu aşağıda ki kodu eklemeye bu koduda yine Ctrl+F yardımıyla birlikte şablon editör sayfamızda </body> kodunu aratarak buluyoruz ve üzerine gelcek şekilde JavaScript kodlarını ekliyoruz.

JS<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Şimdi aşağıda verdiğim görsellerden hangisini beğendiyseniz onu seçerek yukarıda vermiş olduğum JavaScript kodunun içerisinde yer alan "page-loader" yerine aşağıda beğendiğiniz görsel URL'sini kopyalarak yapıştırmanız yeterlidir.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSZwM2cmwh3EYrVQio1eh5Qo7-zj3u6vrPAXmim1pzBC0voeNJs6DKWLRcnmxSanf-thzZ0AdsUcjx6uVegXJRcdugw7V9BGw68f31Y3s_fJtsbhtyYABRqthsvrUGpmwN-CBru-2TyjL4/s1600/loading4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_n28po1xrIsLZwuUW891kXuqfCTAL6yumC-13BclCjmYWr269u4mCT1NhJ76yVBS-4eFTx3t5Z26POsiuIq05ey8jIgX91_o1cny3b-qwSSUnagqat_dnkmisjsCWS6OXb7RBlTY902g/w128-h54-no/Loading8.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9NmeCeY81mjLgEIXO-1nU7QciGpw-8X4sQbn89DJS5JZFP1tj1TEvVNV84ofjjmdZAPATSGqCwu3bCKzhuKDcZ3SSAcAaVY-GhC68xzg4IsRUAKWUZsyPIatNGsw6iAodkRAJiI-o-Ts/w128-h40-no/Loading10.gif