Yap Akhir nya setelah 3jam cari jalan kemana-kemana dan otak-atik kode tag kondisional, selesai juga pasang Photoshop Online di blog. hehe yap Sahabat kali ini saya akan bagikan cara membuat Efek Loading Pada Blog, ya mungkin untuk yang suka nongkrong di Kang Ismet pasti sudah pada tahu efek nya, hmm.. tapi di Kang Ismet saya cari-cari efek loading nya ga ada, cuman ada efek loading untuk komentar nya. oleh karena itu saya cari-cari diluar , yap akhirnya dapat juga, hehe. nah ternyata cara nya cukup mudah dan akan memberi kesan kepada pengunjung, seperti saya berkunjung ke blog Kang Ismet dan berkunjung ke sumber blog yang memberikan tutorial Cara Membuat Efek Loading Pada Blog. Yap langsung aja cara nya
1. Pertama Sahabat Masuk ke Blog lalu Edit HTML
2.Nah 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/AVvXsEgxsuNCGGBChGUc5cC3yX43bIFDRCwLrNKhcr-cIm98P_cdBtuJLWPcYvZvMWshmmcer4zrOiUB08E4ACLamNzFs7PkupGVDWi2X6Ael1jvjLdvKpXk3GcJha5ArLfH6rwrC4pQxqUkFq_c/s1600/image_590519.gif") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}
Info :
1. Kode Background: #303030 = bisa di ganti dengan warna yang disukai bila tidak paham masalah kode warna HTML Sahabat bisa lihat kode warna nya di Tools Warna
2. Kode yang berwarna biru bisa di isikan dengan URL gambar gif/animasi milik Sahabat sendiri, link gambar diatas adalah efek blog ini, jadi kalau suka dengan efek loading blog ini tidak perlu diganti atau bisa juga gunakan gambar yang diatas atau juga bisa menggunakan website pembuat gambar gif loading, diantara nya:
chimply.com/generator
webscriptlab.com
xeosoft.com
www.loadinfo.net
www.preloaders.net
www.ajaxload.info
3. Selanjut nya 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. Save Template dan rasakan perbedaan nya.. hihi
sumber: htp://labeltutorial.com
Yap semoga bermanfaatl Cara Membuat Efek Loading Pada Blog
