Blogger Açılışında Yüklenme Durumunu Animasyonlu Gösterme

Bloglar bazen fazla yüklenmeden yada internet bağlantınızın hızından kaynaklanan nedenlerden dolayı geç açılabiliyor.Ziyaretçilerinizi bu açılma sürecinde sıkmamak için göze hoş gelen bir eklenti ile yüklenme animasyonu ekliyebilrsiniz.Ziyaretçi blogunuza giriş yaptığında eklentileriniz tam manasıyla açılınca % lik çubuk doluyor ve blogunuz açılıyor.Bir başka deyimle dolum çubuğunun hızı blogunuzun açılma hızıyla orantılı olarak çalışıyor,blogunuz hızlıysa çubuk çabuk doluyor, yavaş ise geç
doluyor.Bu yazıyı yayınlamadaki amacımız, ziyaretçi geldiğinde, blog açılmıyor deyip terkedip gitmesin, blogunuzun açıldığını dolan çubuk animasyonu şle görsün ve beklesin diye birde blogunuzu farklı kılan,göze hoş gelen bir eklentiyi sizlere sunmak istedik.

Animasyonu Blogunuza eklemek İçin;Her ihtimale karşı şablonumuzun bir yedeğini alalım.
1.Adım:Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip ediyoruz widget şablonlarını genişlet kutucuğunu işarteliyoruz.Kodlar içerisinde Ctrl+F yardımı ile </head>

kodunu buluyoruz.Aşşağıdaki kodu bulduğumuz </head> kodundan önceki kısma yapıştırıyoruz.

<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js' type='text/javascript'/><!-- End Gadget Code From http://www.memurvadisi.com/ -->

2.Adım:Yine html kodları içerisinde </body> kodunu buluyoruz ve aşşağıdaki kodu bulduğumuz </body> kodundan önceki kısma yapıştırıyoruz.

<script>
    QueryLoader.selectorPreload = &quot;body&quot;;
    QueryLoader.init();
</script>

3.Adım:Son olarakta yine html kodları içerisinde ]]></b:skin> kodunu buluyoruz ve aşşağıdaki kodu bulduğumuz ]]></b:skin> kodundan önceki kısma yapıştırıyoruz.

.QOverlay {
    background-color: #000000;
    z-index: 9999;
}

.QLoader {
    background-color: #CCCCCC;
    height: 1px;
}

.QAmt {
    color:#FF530D;
    font-size:50px;
    font-weight:bold;
    line-height:50px;
    height:50px;
    width:100px;
    margin:-60px 0 0 -50px;
}

Şablonumuzu kaydedip çıkıyoruz.
3.adımda verdiğimiz kodlar üzerinde aşşağıdaki resimde belirttiğimiz yerlerde değişiklik yaparak Yükleme Animasyonu renkleri üzerinde değişiklik yapabilirsiniz.(Renk Kodları için Tıklayın)