Simple Javascript Pre Loader Blog

Loading Blog Script dapat dipergunakan secara permanen di dalam web atau blog sehinngga ketika blog mulai dibuka maka image loding akan muncul sebagai pertanda bahwa loading sedang berjalan. Image yang disertakan dapat diganti dengan image yang lain yang lebih menarik sehingga penampilan blog bertambah keren.

D E M O

Cara membuat Loading Blog :

Login ke Blogger.
Halaman Dasbor (Dasboard) :
Klik "Rancangan (Design)"
Setelah halaman baru terbuka, klik "Edit HTML".
Lakukan "Backup Template".
Cari kode <head> atau ]]></b:skin> , kemudian letakkan javascript di bawahnya.
Copy dan paste-kan kode CSS di atas kode ]]></b:skin>
Cari kode <body> atau <body expr:class='"loading" + data:blog.mobileClass'> , kemudian letakkan xHTML di bawahnya.
Rubah kode body menjadi seperti yang terdapat dlam box xHTML body.
Klik "Simpan Template (Save Template)".
Buka blog dan lihat hasilnya.

Javascript :

<script language='javascript' type='text/javascript'>
//<![CDATA[
function ngaloding() {
    if (document.getElementById) {
        document.getElementById('MBngaloding').style.visibility = 'hidden';
    } else {
        if (document.layers) {
            document.preloader.visibility = 'hidden';
        }
        else {
            document.all.preloader.style.visibility = 'hidden';
        }
    }
}
//]]>
</script>

Kode CSS :

#MBngaloding{
        position:fixed;
        left:0;
        top:0;
        opacity:0.85;        
        filter:alpha(opacity=85);
        background:#000;
        width:100%;
        text-align:center;
        z-index:10; 
        height:100%;
}
#MBngaloding img{
        display:block;
        margin:220px auto;
        width:120px;
        height:120px;
        text-align:center;
        border:10px solid #aaa;
        border-radius:15px;
        box-shadow:0 0 20px #000;
}

xHTML :

<div id='MBngaloding'>
<img src='http://mitrabarayaprojec.googlecode.com/svn/mitrabaraya_JQ-loadingLightBox.gif' />
</div>

xHTML body :

<body onload='ngaloding();'>

atau seperti berikut :

<body expr:class='&quot;loading&quot; + data:blog.mobileClass' onload='ngaloding();'>

Keterangan/Catatan :

Script hanya dapat bekerja/berfungsi di "Template Tata Letak". Sementara ini masih belum kompatibel di "Template Designer".
Panduan cara backup template dan cara mencari kode serta berbagai cara menyimpan kode dapat anda buka di Special Tutorials di menu sebelah kiri halaman.
Anda dapat mengganti image loading dengan image yang lain.
Penggantian image loading harus disertai perubahan ukuran dan posisi jika ukuran image berbeda. Lakukan perubahan pada :
- width:120px; » sesuaikan dengan lebar gambar baru
- height:120px; » sesuaikan dengan tinggi gambar baru
- margin:220px auto; » untuk menaikkan atau menurunkan posisi image (vertival) dimanan semakin besar akan semakin turun.
Jika masih ada bagian blog yang terlihat ketika loading berjalan, perbesar nilai z-index:10;

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Rebo PAHING, Maret, 14, 2012

» Happy Blogging - mitrabaraya «

Bloger Sunda | tutorial blogger

Rabu, 20 Januari 2010