Siteler de sayfa yüklenir iken bazı animasyonlar görmüşsünüzdür. Bu animasyon efektleri yazı olabileceği gibi semboller olabilir. Blogger sitenizde ön yükleme yani yükleniyor efektleri ve nasıl ekleme yapabileceğinizi anlatacağız. Sitelerin dışında uygulamalar için kullanılan yükleniyor veya geçiş efektleri kullanıcı için faydalı olacaktır.
Hızlı siteler için kullanımı gereksiz olacaktır. Ancak yavaş siteler için sayfa yüklenir iken geçiş efektleri güzel olacaktır. Blogger için ön yükleme efektlerini ana sayfa ve sayfa geçişleri için kullanabilirsiniz.
Sitenizde kullanabileceğiniz Ön Yükleme "Yükleniyor" Efektleri ve siteye nasıl uygulayacağınızı göstereceğiz. Ayrıca bir kaç güzel efekt önerimiz olacağı gibi farklı efekt kullanımı siz kalmış.
Yükleniyor efektleri yavaş siteler için kullanılır ziyaretçiye sayfa yüklenene kadar animasyon gösterilir. Bu sayede kullanıcı sayfanın yüklendiğini ve sayfanın olması gerektiği gibi yüklenmiş halini görecektir.
Blogger sitesi yavaş olanlar blogger hızını artırmak için bir takım çalışmalar yapması gerekir. Ancak yeterli hıza ulaşamayanlar için bu efektler yardımcı olacaktır.
Blogger Ön Yükleme "Yükleniyor" Efektleri Nasıl Uygulanır?
Blogger' Yükleniyor efekti ve animasyonları eklemek isteyenler vereceğimiz css, html ve js kodlarını sitelerine eklemeli. Ön yükleyici çalışması için bu kodlar gerekli ve animasyon efekt seçimi size bağlı olacak.
İlk olarak css kodlarını siteye dahil etmelisiniz. Aşağıda ver alan css kodlarını ]]></b:skin> kodundan önce ekleyiniz.
Css kodları arasında bulunan görseli farklı efekt kullanmak için değiştirin. Birbirinden farklı ve güzel efektler sayfanın en altında yer alıyor.{alertInfo}
#loader {
background-color: #fff;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-7upbCHU5vIhcPhAWCEu5Y8wfDmVQ7RAvc2qjOjxN2YfN1uTHm3Go6IN4hWcLAlznZeXP7OXqEdVHWfLH80lqwmfaDHrFY8A9ErQGUnQ4LvPstBqyjfx0-3613COF4gXK9hfPbanlkD0-/s0/yukleniyor-renkli-gecis-efekti.gif);
background-position: center center;
background-repeat: no-repeat;
background-size: 70px 70px;
bottom: 0px;
left: 0px;
position: fixed;
right: 0px;
top: 0px;
z-index: 9999;
}{codeBox}
İkinci aşama olarak Ön yüklenici görünmesini sağlamak için aşağıdaki kodu <body> hemen sonrasına ekleyiniz. Bu kod için iki farklı kullanımı bulunur. İlk kullanımı sadece ana sayfa için ikinci kullanımı ise sayfa geçişlerinde de kullanmanız için ekleyin.
Sadece Ana Sayfaya Yükleniyor Efekti Ekleme Kodu
Bu kod sadece ana sayfa açıldığı zaman animasyon efektini göstermeye yarayacak.
<b:if cond='data:blog.pageType == "index"'>
<div id='loader'/>
</b:if>{codeBox}
Tüm Sayfalara Yükleniyor Efekti Ekleme Kodu
Bu kod ana sayfa ve diğer tüm sayfalar açıldığı zaman animasyon efektini göstermeye yarayacak.
<div id='loader'/>{codeBox}
Kullandığınız tema kaynak kodlarına css ve html eklendikten sonra çalışması için js kodlarını ekleme işlemi son işlem olacak. Temada </body> kapanış etiketinden hemen önce aşağıdaki kodları ekleyin.
<script type='text/javascript'>//<![CDATA[
// Loader
$(window).bind("load",function(){$("#loader").fadeOut(1e3)});
//]]>
</script>{codeBox}
Ön Yükleme Yükleniyor Efektleri
Aşağıda listelenen ön yükleme efektleri arasında kullanmak istediğiniz url kopyalayın. Kopyalanan url yükleniyor kurulumda css kodları arasında bulunan ilgili alana yapıştırın.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNv5wlUnXSq4jDNbeiy5hiVAr8y-26L9_LDN4agEhaSbzQjUzShVV7ircYjebyLYQ_ZmIlmYozsj_NGzkcAkQJXIsNNdEjIn0GaBMiLlWaqzD7spfmD9FKMDxRXMKYMyimRNx8xeSr8XBW/s16000/yukleniyor-yuvarlak-efekt.gif{codeBox}
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQvz8hx9l1FYtTc_j_cu2N1JDI8O2OCDYQpJijVvNOMxXCJvM9qSROr7Llca4yJy4_OQqH-XLABlrqpDshkml1sYjq7DgRubBaxW-c2E_5kPX5DQgJgGOelVLDbyYh0WisNgkLeQzEVJKD/s16000/yukleniyor-sekil-gecis-efekti.gif{codeBox}
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_52UimxMOTCKwxmdYIc0o2NDx4D55b_AIMzUsttFD-D3DEZTJ-HGLmrdpKG0tZ6_v4WxKLsWY-hC_4Hh0VbesQueYElZy9coYXYB7TjWaaASc9a6Bh3PK8aP2DdKl5I9MGoI92FmzQ9-d/s16000/yukleniyor-kum-saati-efekti.gif{codeBox}
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-7upbCHU5vIhcPhAWCEu5Y8wfDmVQ7RAvc2qjOjxN2YfN1uTHm3Go6IN4hWcLAlznZeXP7OXqEdVHWfLH80lqwmfaDHrFY8A9ErQGUnQ4LvPstBqyjfx0-3613COF4gXK9hfPbanlkD0-/s0/yukleniyor-renkli-gecis-efekti.gif{codeBox}
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIUX8axWEAxZFT2PHxjycHwBflSQlJd5DhTsMiPwEZ20XxIl9MfSjv3VGCuYHTs-9NV5puGkQj1_T278fI_dTJX_3e0o4gN-v6qZ8WxyJW00hrBhiRcBjyBsb3pzVVlgUDrjId6BhvxLWu/s0/yukleniyor-renkli-nokta-efekti.gif{codeBox}
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjk-UYY5SNAcohj5cvhWtYLjyvlTtYAYipWErpG4ujYohUwTZsAI-9up9XX2HHY8pzeinV2GcJFU68HaALJNfcdVjtNHuL5yKDp2EK50NYjwtE2v-MUjo7pg5F9199vCiDw0QC00g7QUUZ/s0/yukleniyor-sarmal-efekti.gif{codeBox}
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdiGvWXMStY6Sq4CIAjrHgYvhrh5MzjsUgGXcHp1I6KlIyJsoxoB6srVtLfLpW7-D4IeEHOAj9g74htnlM6kfIKa2PIgq_cMBJpNMfN_8eZlyFWc9k_vODueDQLzq-SrvHM1gs_cX7Z1iw/s0/yukleniyor-efekti-sekil.gif{codeBox}
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZaNX9zTQOqDDVe7_if2PeO8yFkDIqtT7Ty602KjkOIVChCNtf0gKZEkvQRzWfBt6msUR_6R3dnLk3OrAzPC3x_oTO2yRwMPIFmj2r7NfDvwWflIv-UTuLveD7MSrLUvXAW6alU-cAFIHp/s0/yukleniyor-donen-sekil-efekti.gif{codeBox}
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-osgrDOkJp9OqST-QpAUXVHpDTE0k-2v_x22oeKz3eifH4fSBbjC2GHNc5sOSFebxES34vEs5MgIUpxXYckBHoIeSIn3NR8lj6w_fsoqJDVqQIw6tton9zcZT_plrstvdtWMqCmbJYPx2/s0/yukleniyor-deney-tupu-efekti.gif{codeBox}
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPKSvLzilI2jMVACv8mhvMQynXMd5PXfE95cTjM_90-hdnMBhEa4sE09PyS7uSaysimoIm5cuUHjJlS6KkIwM8pmuQsPbYv-OsKwj4_NPgutNvD0XirWl9QlbyBrqFBiNt6oyR-GJc8y_I/s0/yukleniyor-cark-efekti.gif{codeBox}
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiex2kPiWcLxfBPhoskBoPKRi6NbiiuAnJ7TOsMhVfwtp4xxclZMGGIEYeKacloCWBIwSNTTEHmw1hOWStRNBsSz9nn-Q_LoG5U6T0Z48LFZPeHdQD3ftt-oAfDFdFIkFe6SBN8Z1ttTo8q/s0/preloader-kare-mavi-efekti.gif{codeBox}
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgloqv0I3tPFVQYujsay8y8dSqcH2xd6tnYsIkbXbKYxwSoU6sO9UVwdZg_jGPsSJEpTdPUeHdZgY9YBmialCqVDjnAPHu9LFPVjDTRuM9Wtu2RBhR32KK5hSvADkwjelRU7XWzjFDQXx1U/s0/on-yukleyici-renkli-kare-efekti.gif{codeBox}
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU0d9zE_BDI1OXHxKqiLt8g8kftCzDtHmwCoqTrC2CY2O6Tb52_3SAh0x8dRugniwzw4b5SD6hHTk1AqxIwmHLu4YphWm-6OC6XdPkkDTvgFzTrx5YY0ZaBgIxmQc2Ijr5WOtk2w34zjI1/s0/1482.gif{codeBox}
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9DG0dgMVHNqAu28JOD77CrxrVPy6PLZKPSYUdlleIrE5S-hNtZfdgZWFisG-vZbS6dhk6h2hyphenhyphencw2c3HLNLEgiy6MnnnLd16Mrlxzn9N-2xU5OO71XAFxRB4YSfrJfhIboHH_SkT7w1AKz/s0/yukleniyor-arama-efekti.gif{codeBox}
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8NhaEklJNjU41lAOKGV_9i4o5Rv-FkSc28fMZWK9ag4WnSsyMjhLiHUOdu-2B1xfLNo-FmVsoWVhkRhhhFvzHYFr-3RIn3EOlAh1iZUfIgP-gtjq0eaLX9f8Gzsx3giYTtwmMoNzdn4so/s0/yukleniyor-efekti-1.gif{codeBox}
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8TWU5RbyogBP5bVd9d9RvcvAV722oTnfRVZOwvfl6s0Va0_8d1P_h9unDeWE92AkqSF704fnRZdYgLazA2L4CwfTpdFLt3CplgYreNS_nSjNeCPwJdoDaQaDy4V1XWD6Oj-JxMmNZtQU3/s0/yukleniyor-efekti-2.gif{codeBox}