Cara Membuat Tampilan Loading sebelum Blog Terbuka
Artikel kali ini bukan tentang XFactor tapi tentang Tutorial Blogger yang udah lama tidak update. Membuat Tampilan Loading sebelum Blog Terbuka merupakan trik blogger yang saya dapatkan dari blog keren punya mas Revian yaitu blog Revian-4rt *maaf mas gak ijin dulu :p*. Judul asli artikrel ini Membuat Animasi Loading dengan JQuery - Bagian 2 berhubung bahasanya terlalu WAH maka saya ubah biar lebih dimengerti org awam seperti saya ini.
Langsung saja lihat Demo Membuat Tampilan Loading sebelum Blog Terbuka
Langkah pertama backup template untuk jaga-jaga kalau ada kesalahan. Buka Blogger > login > Dasbor > Template > Edit HTML > centang Expand Template Widget, letakkan code dibawah ini dibawah <body>
<div id='loading-overlay'>Loading...</div>Temukan kode ]]></b:skin> letakkan kode berikut diatasnya
#loading-overlay { width:100%; height:100%; position:fixed !important; position:absolute; /* IE6 Fallback */ top:0; right:0; bottom:0; left:0; z-index:999999; background:#3A3A3A url('http://3.bp.blogspot.com/-_ONDmjNBMJs/TwPCL3AdlII/AAAAAAAAB4c/02MboPkAHGg/s1600/layer_loading.gif') no-repeat 50% 50%; font:normal normal 0/0 a; color:transparent; text-shadow:none; }Anda bisa mengubah gambar loading yang berwarna merah dengan gambar loading lain.
Sebelum penutup </head> tambahkan kode berikut
<script type="text/javascript">$(window).bind("load", function() { $('#loading-overlay').fadeOut(); });</script><noscript> <style type='text/css'> #loading-overlay {display:none} </style> </noscript><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>Kode berwarna kuning bisa dihapus jika didalam template telah ada.
Klik pratinjau, bila sudah berhasil maka simpan template Anda.
Terimaksih telah membaca Membuat Tampilan Loading sebelum Blog Terbuka bila ada pertanyaan langsung ke blog DTE aja ya :p, semoga bermanfaat.
Tidak ada komentar: