Cara Membuat Efek Loading Pratinjau Blogger Pada Blog

Pernahkah Anda melihat pratinjau atau preview blogger? Misalnya saat Anda berada pada menu Tata Letak, Anda menambahkan widget tertentu dan mencoba melihat hasilnya? Atau saat Anda membuat sebuah postingan yang belum dipublikasikan dan Anda preview dahulu?

Saat menunggu halaman dimuat seluruhnya, Anda akan melihat sebuah tampilan loader semacam gear. Pada postingan kali ini, bila tertarik, Anda dapat mengikuti dan menerapkannya pada blog Anda.

DEMO

1. Login ke blogger dan pilih menu Template.

2. Pilih Edit HTML.

3. Tambahkan kode berikut ini dibawah kode <body> :

<div id="aiizahh-loader"></div>

4. Tambahkan kode berikut diatas ]]></b:skin> :

#aiizahh-loader {
background:url(http://www.blogger.com/img/gear.gif) no-repeat center;
background-color:#ffffff;
width:100%;height:100%;
position: fixed; left: 0px; top:0px; z-index: +100000;
}

5. Letakkan kode berikut ini diatas </body> :

<script>
//<![CDATA[
//Loading Halaman
$(window).bind("load", function() {
    $('#aiizahh-loader').fadeOut(1000);
});
//]]>
</script>

6. Simpan.

Lebih lanjut, Anda bisa mengedit kode tersebut, misalnya mengganti background nya dengan gambar lain, meskipun akan jadi kurang pas dengan judul yang memberikan tutorial efek loading dengan tampilan pratinjau blogger. hehe2