Kamis, 26 Desember 2013
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 jQuery4. 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioPYg6NLHIYZzJQSxeUT0oauxkd-P7QALHd6PQQUQHVuj_ST5QwaWYBzEzsfCFhk-wBntcuKvJJ4kXepu0pU2UkMP09KyUeN_FJGv47BSDRYVbJMz_B44pW_pCd_GUU3UAoVqwlBtX4lI/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>
//<![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
Sumber Tutorial memberikan efek loading di blog adalah Zero-Cyclops