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/AVvXsEhPANNzgb1FlCvULcCJkDqf_iXxJyHgjuLmEfdBfSLRFv5cEzttysKWtgvsZRFmvcp7oA2KpzeO70xC73q7509vQxqwk-DSZ5qSeVY1lkwNGjJRF9sAvmHzr3iDWvbm4d7UHDQce-JQ6Ag/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.
Demikian artikel tentang Membuat Efek Loading Ala Blog Kang Ismet ini dapat kami sampaikan, semoga artikel atau info tentang Membuat Efek Loading Ala Blog Kang Ismet ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.
