Selamat siang sahabat Blog Alvin Warasi, pada kesempatan siang ini saya akan membagikan trick yang lumayan keren yaitu
"Membuat Efek Loading Blog Ala Alvin Warasi"
Simak langkah-langkah di bawah ini:
1. Login ke akun
blogger Anda.
2. Klik
Template Edit HTML
3. Tambahkan kode
CSS berikut ini tepat 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/AVvXsEgZA_DeiSlEGxURMoi-o4c3yrYlWZbzr-E3Y6kJd3JI2Wv3wF1U1jZsfqjSX-NnkpHY0Qusyq9NOA8WoAsvzo93fo7w7IR8ffwpYpec81FTNJmtPuOP7AMVzkxirlSnfNu_X9jbuDJ0oaM/s200/load6.gif") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}
4. Msukkan kode
JQuery di bawah ini tepat di atas kode
</head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
NOTE:
Jika template blog Anda sudah terpasang kode JQuery di atas Abaikan saja untuk langkah ke-4 ini (Tidak usah di pasang)
5. Masukkan kode
Javascript di bawah ini tepat 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>
6. Kemudian
Simpan template Anda dan lihat hasil-nya :)
Okeyy,.. sekian dulu tutorial yang bisa saya sampaikan pada kesempatan siang ini,..
Semoga tutorial
"Membuat Efek Loading Blog Ala Alvin Warasi" ini bermanfaat bagi Anda semua-nya,..
Blogger
Google+
Facebook
Twitter