Membuat Efek Loading Ala Blog Kang Ismet, Assalamu'alaikum Para Pengunjung Blog Hamzah Fansyuri 14™ kali ini admin mau bagikan tutorial tentang cara membuat animasi loading,
Para Bloggers pasti ingin membuat pengunjug
blog menjadi nyaman dengan tampilan blog, selain membuat tampilan blog menjadi
nyaman agan juga pasti tidak ingin membuat pengunjung blog menjadi bosan, oleh
karena itu sekarang admin Hamzah Fansyuri 14™ mau bagi tutorial Membuat Efek
Loading Pada Blog. Upps Hampir lupa hanya mengingatkan walaupun tutorial kali ini
adalah menambah css sekaligus javascript tapi tenang ini tidak menambah beban
loading blog. Oke langsung aja kita pasang animasi loadingnya.Membuat Animasi Loading Di Blog
Langkah Pertama : Buka Blogger > Template > Edit HTML
Langkah Kedua : Masukan kode CSS di bawah ini tepat di atas ]]></b:skin> atau </style>
/* ---ANIMATION LOADING--- */
#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/AVvXsEid-tzNyKMQXYwYXr8T6NyvQ-A8Mzs2x3G575LogFufE6TPMN8mzNWWi7U1Dk2FmnzxXHqVkFWT9JVSuFa61NgORQL0jK59TKIIJclpa5klEt81Vy2tgfOpqxun0J9C5qPBQwMUGH1b-Bs/s200/load6.gif') no-repeat 50% 50%;
color:white;
padding:1em 1.2em;
display:none;
}
Langkah Ketiga : Pasang jQuery pada blog anda, Untuk pemasangan jQuerynya bisa dilihat Di Artikel Admin Tentang Pemasangan jQuery Pada Blog. Atau Bisa Ikuti cara dibaah ini
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'/>NB: Kalau Template Blog Sudah Aa Jquery Jangan Dipasang
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);
});
//]]>
Langkah Terakhir : Simpan template sobat...
Itu hanya script sederhana dan agan masih bisa
memodifikasi antara lain gambar animasi loadingnya, durasi loadingnya dan masih
banyak lagi yang bisa dikembangkan dari code diatas.
Sekarang admin mau pamit, kalau ada pertanyaan
atau ada yang mau request tutorial langsung aja komentar insaallah admin bisa
menjawab pertanyaan agan.