Kang Rian [ on Blogger! ]

rian nurherdian, kang rian, blog kang rian, blog rian nurherdian, blogger hacks , free blogger templates, blogspot tutorial, blogger tutorial, tutorial seo, tutorial html5, blog seo friendly, modifikasi template blog, desain web pemula, blogger basic

Membuat Effect Loading Blog dengan jQuery

Membuat Effect Loading Blog dengan jQuery -
Kali ini kita akan membuat Effect Loading Halaman menggunakan Fitur jQuery dengan tambahan ke-2 bumbu coding CSS & JavaScript , akan kita buat menjadi sebuah resep efek loading page / loading halaman yang akan tampil ketika berpindah halaman ..

Pada Kesempatan ini saya akan membuat ke-2 coding nya terpisah , agar mudah di pahami oleh anda yang ingin mencoba resep " Membuat Effect/Efek Loading Halaman " dengan Bumbu CSS & Javascript ini ..

Langkah-1 : Pastikan sobat sudah memasang jQuery Library! jika sobat belum memasang jQuery Library, silahkan simpan kode di bawah ini tepat di atas kode </head> :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"/>
Catatan Penting! : Pemasangan jQuery dalam Blog hanya boleh 1x saja, jika lebih dari 1 maka Efek-efek yang mengandalkan fungsi jQuery tidak akan berfungsi.


Langkah Ke-2 perhatikan Bumbu CSS dibawah ini , jika sudah dirubah lalu simpan tepat sebelum kode ]]></b:skin> :

#page-loader {
    position: fixed!important;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #f2f2f2 url(//googledrive.com/host/0B7H_GQEvKCj1Rmh1blVLZV9fSlk/Gambar/kr-loading.gif) no-repeat 95% 95%;
    color: #fff;
    padding: 1em 1.2em;
    display: none;
}

Keterangan CSS :

1. #f2f2f2 → Diganti dengan Code HEX Warna Background untuk loading sesuka anda. Menggunakan Color Picker →

2. //googledrive.com/host/0B7H_GQEvKCj1Rmh1blVLZV9fSlk/Gambar/kr-loading.gif → Diganti dengan Alamat Gambar/Animasi berformatkan (.GIF) sesuka anda , dan anda pun bisa membuat Animasi Loading sendiri , silahkan Klik disini .


Langkah Ke-3 : Simpan bumbu JavaScript di bawah ini Tepat sebelum kode </body> :
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
    $('#page-loader').fadeIn(500).delay(1000).fadeOut(1000);
});
//]]>
</script>

► Selesai, Save Template! dan sekarang tinggal "REFRESH [F5]" pada halaman blog anda .. Semoga Berhasil!

Catatan: BUMBU = CSS & JavaScript ( CSS & JavaScript itu Bagaikan Bumbu-nya HTML. :D )


Semoga postingan saya tentang Cara Membuat Loading Blog dengan CSS & JavaScript yang saya bagikan ini bermanfaat untuk sobat blogger yang membutuhkan. Terima kasih telah meluangkan waktu untuk membaca Kumpulan Tutorial Blog 2014 yang saya bagikan ini.
Salam Blogger,
Kang Rian
Suka artikel ini? Bagikan!