Cara Membuat Efek Loading Blog - Tutorial ini diadobsi dari ke blognya Kang Ismet pasti udah tau dong Efek Loadingnya Nah, sekarang saya akan ngasih tau cara buatnya :D
1. Buka Blogger > Template > Edit HTML
2. Copy kode di bawah ini, lalu paste di atas kode ]]></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/AVvXsEhnGSgRohQv13GP5GNrHN0sWauAJM5r4nP0-n705aFDb7IKgTNPOR2sZgqXW00ZHK-qYcOXcylkJue0Yqpc-FHKxDm6TKat0UkSfTGSPy1SaifrKzD0TeQfzwFhPQT0-A9E7FhcP-9pKtw/s200/load6.gif") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}
3. Copy kode di bawah ini, dan paste di atas kode </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 kalian telah dipasangkan Jquery.
4. 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">Loading...</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>
5. Terakhir, simpan template :D
Sekian posting saya kali ini, jangan lupa Like/share/komentar ya... Semoga Bermanfaat ^_^
Artikel keren lainnya:
Belum ada tanggapan untuk "Cara Membuat Efek Loading Blog"
Posting Komentar