Membuat Efek Loading Seperti Blog Kang Ismet
08 May 2014
Membuat Efek Loading Keren Seperti Blog Kang Ismet - Selamat datang sobat semua, sekarang saya akan membagikan Tutorial '"Membuat Efek Loading Seperti Blog KI" efek loading ini memang sudah populer / sudah banyak yang membagikannya, tapi tidak sempurna rasanya jika tutorial ini tidak ada di blog kesayangan sobat semua. Silahkan simak baik-baik tutorial ini.
Langkah Pertama : Buka Blogger > Template > Edit HTML
Langkah Kedua : Masukan kode CSS di bawah ini tepat di atas ]]></b:skin> atau </style>
#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/AVvXsEgR2ykhs4WuLMeFpkTtU6W1PaBgC_5_kDwSNc3WJtDG4oY6RHy2f9usUlx4Ixk28KYLbm5NB3CTPx1e5pSuEPWlore322yE_SB9CUjqTDhriJ0hZ2aQVe4IltFS7CtugWrZs3s5YctVDd8/s200/load6.gif") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}
Langkah Ketiga : Masukan kode di bawah ini tepat di atas </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
NOTE : Lewati langkah ketiga, jika template blog sobat telah dipasangkan Libs/Jquery.
Langkah Keempat : Masukan kode di bawah ini tepat di atas </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>
Langkah Terakhir : Simpan template sobat...
Semoga Tutorial ''Membuat Efek Loading Seperti Blog Kang Ismet'' bermanfaat bagi sobat, jangan lupa like, share, dan komentarnya ya, tunggu tutorial selanjutnya..