Cara membuat effect loading pada blog

Sahabat hanya blogger mungkin anda sudah sering melihat efek loading blog saat berselancar di dunia maya,





atau sebagai contoh blog saya ini juga telah menggunakan efek loading.oke berikut caranya


Pertama pasang jquery, jika belum letakkan script di bawah ini sebelum code </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
Keterangan: Jika dalam template anda sudah terdapat jQuery maka langkah satu diabaikan saja

Jika sudah tambahkan css di bawah ini sebelum ]]></b:skin>


/* page loader */
#page-loader { position:fixed !important; position:absolute; top:0; right:0; bottom:0; left:0; z-index:9999; background:#000 url(' data:image/gif;base64,R0lGODlhKwALAPEAAP///0tKSqampktKSiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAKwALAAACMoSOCMuW2diD88UKG95W88uF4DaGWFmhZid93pq+pwxnLUnXh8ou+sSz+T64oCAyTBUAACH5BAkKAAAALAAAAAArAAsAAAI9xI4IyyAPYWOxmoTHrHzzmGHe94xkmJifyqFKQ0pwLLgHa82xrekkDrIBZRQab1jyfY7KTtPimixiUsevAAAh+QQJCgAAACwAAAAAKwALAAACPYSOCMswD2FjqZpqW9xv4g8KE7d54XmMpNSgqLoOpgvC60xjNonnyc7p+VKamKw1zDCMR8rp8pksYlKorgAAIfkECQoAAAAsAAAAACsACwAAAkCEjgjLltnYmJS6Bxt+sfq5ZUyoNJ9HHlEqdCfFrqn7DrE2m7Wdj/2y45FkQ13t5itKdshFExC8YCLOEBX6AhQAADsAAAAAAAAAAAA=' ) no-repeat 50% 50%; color:white; padding:1em 1.2em; display:none; text-shadow:none }

Selanjutnya sisipkan scrip di bawah ini tepat di atas </body>

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"> </div>');
// Saat halaman aktif terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);});
//]]>
</script>

Simpan  template dan lihat hasilnya.
Previous
Next Post »

Silahkan berkomentar dengan bijak dan sesuai dengan topik artikel...
And please no spamming brooo....!!! ConversionConversion EmoticonEmoticon