Membuat Efek Loading di Blog Dengan Mudah

Membuat Efek Loading di Blog  - Mungkin sobat sering melihat efek loading di beberapa blog. Menurut saya efek loading ini menambah can...

Membuat Efek Loading di Blog - Mungkin sobat sering melihat efek loading di beberapa blog. Menurut saya efek loading ini menambah cantik penampilan blog, dan membuat pengunjung mau menunggu karena blog sedang loading. Bagi sobat yang mau tau demonya, klik lik mana aja di blog ini atau klik disini dan liat loadingnya.

Untuk membuatnya, silahkan ikuti langkah- langkah di bawah ini :

Langkah 1 : Tambahkan jQuery pada blog sobat

Simpan kode di bawah ini sebelum </head>

src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Apabila template sobat sudah memiliki jQuery, lewati langkah ini. Harap diperhatikan, tidak boleh ada script jQuery lebih dari satu.

Langkah 2 : Tambahkan CSSSimpan CSS ini di atas ]]></b:skin> 

#page-loader { position:fixed !important; position:absolute; top:0; right:0; bottom:0; left:0; z-index:9999; background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5iefzQ8UUxAh58dvoJ86ACn6vu2L5sBXguWhJUaEPhCEnLeL11iQ9cP4F78dZWiQC7B3NuCKUb-sbV7zZHEH1Rt5sSF_GO3cP-VzPJola2a45-zBxq6ZbOnKtk8kQFkyPiE4l8qnL3m8/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%; color:white; padding:1em 1.2em; display:none; } position:fixed !important; position:absolute; top:0; right:0; bottom:0; left:0; z-index:9999; background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5iefzQ8UUxAh58dvoJ86ACn6vu2L5sBXguWhJUaEPhCEnLeL11iQ9cP4F78dZWiQC7B3NuCKUb-sbV7zZHEH1Rt5sSF_GO3cP-VzPJola2a45-zBxq6ZbOnKtk8kQFkyPiE4l8qnL3m8/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%; color:white; padding:1em 1.2em; display:none;} position:fixed !important; position:absolute; top:0; right:0; bottom:0; left:0; z-index:9999; background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5iefzQ8UUxAh58dvoJ86ACn6vu2L5sBXguWhJUaEPhCEnLeL11iQ9cP4F78dZWiQC7B3NuCKUb-sbV7zZHEH1Rt5sSF_GO3cP-VzPJola2a45-zBxq6ZbOnKtk8kQFkyPiE4l8qnL3m8/s1600/loadinfo.net+%284%29.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5iefzQ8UUxAh58dvoJ86ACn6vu2L5sBXguWhJUaEPhCEnLeL11iQ9cP4F78dZWiQC7B3NuCKUb-sbV7zZHEH1Rt5sSF_GO3cP-VzPJola2a45-zBxq6ZbOnKtk8kQFkyPiE4l8qnL3m8/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;

 Langkah 3 : Tambahkan JavaScript

Tambahkan kode JavaScript ini di atas </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>

Simpan Template Jadi Deh ..!