LOADING ICON

Membuat Efek Loading Pada Blog

Mempercantik blog adalah salah satu kebutuhan para blogger saat ini, terutama untuk menarik pengunjung pada blog itu sendiri dan juga menambah nilai seni pada blog itu sendiri. Nah pada kali ini saya akan membahas tentang bagaimana cara pembuatan efek loading pada blog.
Efek loading sendiri berarti sebuah tampilan semacam loader sebelum kita dibawa ke homepage blog/website kita. Jadi intinya seperti ada jeda sebelum kita masuk ke homepage blog/website.
Untuk cara membuatnya hanya menggunakan code CSS dan juga sedikit jQuery. Demonya kawan semua sudah bisa melihat ketika blog ini akan tampil. Bagaimana tertarik untuk membuatnya ?.

Here it is >>>

1. Login pada halaman admin blog anda.

2. Pergi ke Template > edit HTML > lanjutkan, lalu check pada “Expand Template Widgets”.

3. Lalu cari kode ]]> dan letakan kode CSS berikut tepat diatasnya.

#loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000 url(URL_GAMBAR_ANDA) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.v2 #loading { display: none; }


#progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #f3f3f3;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#loader {
 background: url(URL_GAMBAR_ANDA) no-repeat center 25%;
 height: 100%;
 display: block;
}

Keterangan:
Perhatikan pada “URL_GAMBAR_ANDA” gantilah gambar loading  dengan gambar yang anda miliki. Atau jika berkenan memakai seperti punya saya, silahkan copy link di bawah ini :
http://zomb13.at.ua/ajax-loader-1-.gif
atau bila ingin membuat loader semacam itu silahkan kunjungi situs ini : http://ajaxload.info/
5. Bagian kedua yaitu menambahkan script JQuery, cari kode dan taruh script JQuery berikut tepat diatasnya:

Kalau script JQuery diatas sudah ada di blog sobat, maka tidak perlu lagi memasangnya.
Kemudian tambahkan lagi script berikut dibawahnya:

6. Kemudian carilah kata “” letakkan kode berikut tepat di bawahnya :

Loading...

Tambahan : Kode diatas sudah disisipkan kode agar efeknya berlaku di setiap halaman blog anda.

Selesai… Selamat membuat tampilan blog anda menjadi lebih maknyess lagi. ^_~