Cara Membuat Efek Loading Pada Blog

Hai.. Kembali lagi nih di detik tutor.. Kali ini detik tutor akan memposting tentang cara membuat efek loading pada blog, Jika suatu blog tampilannya biasa biasa aja rasanya kurang menarik ya.. Faktor pengunjung banyak ada template Seo yang mendukung dan juga cara promosi kita ke media sosial.. Nah jika blog kamu ditambahkan dengan efek efek tertentu pastinnya blog kamu semakin keren dong.. yuk simak cara membuat efek loading pada blog

1. Masuk ke Edit HTML Blog  kamu

2. Copy kode css berikut diatas kode ]]></bskin>

#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background: #303030 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDW5QbpdtNiYVnQZ7CSTuJ3rMqOg3Q7pLiPefuoe79p4_4o5u5AI8V1UDW0PAuvngS7HHf5eipwli9NdxGlxSPgBpa66_C_aGOo6xv2O8yPXXaRoCgwFxB0yNBBDPI_kp19j_olXg6N4I2/s320/detiktutor.gif") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}

Info :

1. Kode Background: #303030 = bisa diganti dengan warna yang kamu sukai jika kamu tidak paham akan kode warna HTML bisa cek menggunakan tools kode warna disini

2. Kode yang berwarna merah bisa disikan dengan URL gambar gif/animasi milik anda sendiri atau kamu bisa gunakan gambar yang diatas nah jika anda tidak bisa membuat gif sendiri anda bisa menggunakan tools di website dibawah ini:

www.loadinfo.net
www.preloaders.net
www.ajaxload.info

nah kalo udah dapet gambar animasi atau gambar gif sendiri sekarang masuk ke langkah yang ketiga

3. Copy kode dibawah ini di atas kode </body>

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

4. Kemudian save Template kamu dan lihat hasilnya

Cara ini udah aku coba 100% work lho..  Nah itu tadi cara membuat efek loading pada blog.. Semoga bisa menambah ilmu kita ya.. Terimakasih sudah berkunjung.. Jangan lupa komen dan like fanspagenya ya..

Advertisement