Membuat Efek Loading Seperti Blog Kang Ismet

Membuat Efek Loading Seperti Blog Kang Ismet

Kali ini saya akan membagikan tutorial tentang cara membuat efek loading blog seperti blog Kang Ismet. Silahkan lihat dan rasakan demonya pada blog Kang Ismet. Jika Anda tertarik untuk menerapkan efek loading tersebut pada blog Anda, silahkan ikuti langkah-langkah di bawah ini.

Membuat Efek Loading Seperti Blog Kang Ismet

1. Buka Blogger > Template > Edit HTML
2. Letakkan kode CSS berikut ini 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("http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}

3. Pastikan pada template Anda terdapat jQuery library seperti berikut ini, yang letaknya di atas kode </head>.

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'/>

Jika sudah ada (versi berapapun) tidak perlu Anda tambahkan lagi, karena pada template tidak boleh lebih dari 1 jQuery library. Jika belum Ada silahkan letakkan kode tersebut di atas kode </head>

4. Letakkan kode berikut ini di atas kode </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>

5. Simpan template

Sekarang silahkan Anda lihat hasilnya, jika berhasil jangan lupa berkomentar ya hehe. Terima kasih, semoga bermanfaat.

Leave a Reply