• About
  • Contact
  • Sitemap
  • Buku Tamu

Membuat Tampilan Loading sebelum Blog Terbuka

 on Feb 17, 2013  

Membuat Tampilan Loading sebelum Blog Terbuka. Assalamu'alaikum 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.

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 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.

Membuat Tampilan Loading sebelum Blog Terbuka 4.5 5 Anwar Sofii Feb 17, 2013 Membuat Tampilan Loading sebelum Blog Terbuka, Membuat Animasi Loading dengan JQuery - Bagian 2 Membuat Tampilan Loading sebelum Blog Terbuka . Assalamu'alaikum apa kabar pembaca blog lama yang gak keurus ini :D, semoga selalu ceri...


14 comments:

  1. Keren juga tutorialnya mas. makasih mas atas postingannya.

    ReplyDelete
  2. Sip, Tutorial nya mantap gan. Tapi cara ini gak malah nambah berat Loading Blogg kan gan?

    Blogg nya juga bagus.. Penuh ide,

    ReplyDelete
  3. mantap sob :), terimakasih atas tutorialnya..

    ReplyDelete
  4. wah... makasih...
    bisa diterapkan di blog ku ini...

    ReplyDelete
  5. makasih artikelnya sangat membantu banget.
    salam kenal gan dari Sams-Cyber4rt

    ReplyDelete
  6. kunjungan pertama ane nih gan,,, di blog ini mohon kerjasamnya...

    bikin berat blog ga gan?

    ReplyDelete
  7. Tutorial nya mantap gan. Tapi cara ini gak nambah berat Loading Blogg kan gan?

    ReplyDelete
  8. makasih atas infonya mas sngat bermanfaat

    ReplyDelete
  9. Kalau saya lebih suka pake javascript, kemudian saya upload di google code. biar web gak terlalu berat, g banyak css :D

    ReplyDelete
  10. tapi menurut saya ini membuat blog kita lambat,,,,
    salam blulukz blogz

    ReplyDelete
  11. HANCUR MALAHAN BLOG SAYA MAS !

    ReplyDelete

Pembaca Yang Baik ialah Pembaca Yang Meninggalkan Komentar Yang Nyambung dengan isi artikel, komentarmu = sifatmu!!!
- Jangan tinggalin link dalam komentar, bila terjadi akan saya hapus!
- Dilarang Komentar kasar, kotor, dan sara!

J-Theme