Tutorial memberikan efek loading di blog

Mau juga ada efek loading kayak Tutorial Belajar Komputer? Caranya mudah kok yuk simak dengan baik Tutorial memberikan efek loading di blog.

1. Login di Blogger

2. Masuk di Template - Edit HTML

3. Cari kode </head> dan letakkan kode dibawah ini tepat diatas kode </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript">
Catatan : Lewati step ketiga apabila blogmu sudah terpasang jQuery

4. Setelah itu cari lagi kode ]]></b:skin> kemudian letakkan kode dibawah tepat diatas kode ]]></b:skin>
#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:#000 url('http://4.bp.blogspot.com/-4_hdi8Ph8fE/UYUz5HumQ7I/AAAAAAAAEBE/6KV17KP4RQg/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;
color:white;
padding:1em 1.2em;
display:none;
}

5. Terakhir cari kode </body> kemudian letakkan kode dibawah tepat diatas kode </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>

6. Simpan template
Silahkan cek blogmu klik salah satu posting dan akan loading seperti ini
Tutorial memberikan efek loading di blog


Sumber Tutorial memberikan efek loading di blog adalah Zero-Cyclops

Post a Comment

Berikanlah komentar dengan :
1. Positif : berisikan motivasi, saran, kritik.
2. Komentar akan dihapus jika ditemukan komentar yang mengandung SARA, Porno, dan hal kasar lainnya.
3. Tidak dianjurkan comment as "Anonim"