Cara Membuat Efek Loading Pada Blogspot

Mungkin sobat sudah sering melihat efek loading dibeberapa blog.Menurut saya efek loading ini sedikit menambah cantik blog,dan membuat pengunjung tidak bosan untuk menunggu loading blog.Bagi anda yang ingin tau bagaimana sih bentuk atau gambaran efek loading blog itu caranya cukup mudah yaitu dengan cara mengklik salah satu artikel diblog ini karena blog ini juga sudah saya pasangin efek loading.Jika anda tertarik memasangnya silakan ikuti langkah-langkah dari saya :
Loading Efek....
Login keakun blogger sobat,klik Template pilih Edit HTML
-Pertama tambahkan jQuery pada blog sobat dengan cara tambahkan kode dibawah ini tepat diatas kode </head> :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
Nb: Apabila template sobat sudah memiliki jQuery,lewati langkah ini.Harap diperhatikan,tidak boleh ada script jQuery lebih dari satu.
-Kedua tambahkan CSS dengan cara tambahkan kode dibawah ini tepat diatas kode ]]></b:skin>
#page-loader {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:9999;
 background:#000 url('http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif') no-repeat 50% 50%;
  color:white;
  padding:1em 1.2em;
  display:none;
}
Untuk merubah warna sesuai dengan blog sobat,silahkan edit warna dan gambar pada kode
background:#000 url('http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif') no-repeat 50% 50%;
Edit sesuai selera anda masing-masing
-Ketiga tambahkan javascript dengan cara tambahkan kode dibawah ini tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
-Langkah terakhir tekan save...traaa blog anda berhasil anda modifikasi dan semoga berhasil.

Mas Arif :

17 komentar

Pertamax diamankan,hehehe..thank info sangat bermanfaat buat saya..ijin nyobain ya..semoga diizin ama akang yang buat punya blog,hehehe :)

Balas

kerreeeenn, jadi lebih menarik tampilannya. ^^

Balas

ya,,gan silakan saja dicoba,saya mengizinkan kok :D

Balas

keren nih, dulu saya pernah pake tapi ane lepas gara-gara ganti template

Balas

Sobat izin singgah di blog anda, wahh isi artikel anda keren-keren juga ya...

Makasih udah share....

Balas

Bikin tambah berat gag tuh efeknya...:D

Balas

kalau tambah berat sih iya namanya juga tambah fitur pasti tambah berat tapi gak berat-berat amat kok,,santai aja beratnya masih dalam keadaan stardar..silakan keliling blog ini dan rasakan berat atau tidak..

Balas

:-d jangan lupa follow blog saya gan http://diphonoyo.blogspot.com/

Balas

Terima kasih gan,, akhirnya web saya juga punya efek yang cukup menarik,,,

Balas

Efek loadingnya bikin berat tidak gan??? kalau tidak saya mau coba nihh... :)

Balas

makasih gan infonya sangat membantu

Balas

SayaPoker.com | Agen Judi Poker dan Domino Online Terpercaya Indonesia

Kami Agen Judi Poker Online Indonesia - SayaPoker.com mengadakan Kontes SEO yang akan
di mulai pada tanggal 15 Maret 2014 sampai dengan 31 Mei 2014 ,
dengan Total Hadiah Rp 30.000.000,-

Ikuti dan Daftarkan diri Anda untuk memenangkan dan ikut menguji kemampuan SEO Anda. Siapkan website terbaik Anda untuk mengikuti kontes SEO ini.
Buktikan bahwa Anda adalah Ahli SEO disini. Saat yang tepat untuk mencoba kemampuan SEO Anda dengan tidak sia-sia, hadiah kontes ini adalah Rp 30.000.000,- Tunggu apa lagi?


Kontes SEO SayaPoker.com ini akan menggunakan kata kunci (Keyword):

"SayaPoker.com Agen Judi Poker dan Domino Online Terpercaya Indonesia"

Jika Anda cukup percaya akan kemampuan SEO Anda, daftarkan web
terbaik Anda SEKARANG JUGA! Dan menangkan hadiah pertama
Rp 10.000.000. Pemenang Akan ditentu-kan dengan aturan kontes SEO
yang dapat dilihat di halaman berikut :

http://itulink.com/iframer4.php?page=KontesSeoSayaPoker


Tunggu apa lagi? Ikuti kontes ini sekarang juga.

Balas

punya saya udah jadi gan tapi loading cepet banget

Balas

Silahkan beri komentar dengan bijak dan sesuai dengan topik artikel :)