Membuat Tampilan Loading sebelum Blog Terbuka. Assalamualaikum apa kabar pembaca blog lama yang gak keurus ini :D, semoga selalu ceria dan sehat selalu ya. Udah lama banget gak update disini, terakhir update sebulan lalu tentang Fatin Shidqia Lubis (Biodata Lengkap, Foto, Mp3, Video) anak SMA yang kini masuk 12 besar Xfactor. Saya ngefans juga sama Fatin ini suaranya itu bikin merinding makanya saya selalu update tentang anak ini tapi di blog satunya Disini.
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 taufik yaitu blog DTE *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.
Posting Komentar