Cara Membuat Efek Loading Blog Dengan Mudah

Selamat siang dan happy weekend, ada banyak cara agar blog kelihatan bagus dan rapih. Contohnya menambahkan Efek Loading.

Cara Membuat Efek Loading Blog Dengan Mudah

Efek loading blog bekerja atau berfungsi apabila kamu melihat postingan atau keluar di blog tersebut sehingga akan memberikan nilai plus oleh si pembaca,
Contohnya Loading Blog seperti di atas.

Lansung saja kita mulai:

1. Masuk ke blogger kamu kemudian cari Template ==> Edit HTML

2. Cari kode </head>

3. Copy dan paste kode jQuery dibawah ini tepat di atas kode </head> . (Note : apabila sudah ada kode tersebut lanjut saja ke langkah ke-4).

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

4. Cari kode ]]></b:skin>

5. Copy dan Paste kode CSS dibawah ini tepat diatas ]]></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/AVvXsEibXKOP18haHVpKziXNvElXNEv-G5PngVJtbK5QlxV7DwCnDk8dpfwOIE-306nLcdl4VNk3yoP-9IKeIUwSdrd9x_b5CZJDIUX0qVIYWQ41vNLpVtLWwPGOVgMMDGQFzbjyGOIlbWx3cow/s200/load6.gif') no-repeat 50% 50%; color:white; padding:1em 1.2em; display:none; }

6. Cari kode </body>

7. Copy dan Paste kode JavaScript dibawah ini tepat diatas </body>

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

8. Simpan dan lihat hasilnyal.

PENJELASAN:

a. Kode berwarna biru adalah kode warna latar (background) silahkan ganti sesuai keinginan kamu.

b. Kode berwarna hijau adalah kode gambar yang akan dibuat loading, silahkan ganti sesuai dengan keinginan kamu.

Apabila ada keluhan atau masalah silahkan berkomentar dibawah ini

Tweet