jQuery Loader: Preload your blog

jQyery Loader bekerja di awal blog mulai di buka. Animasi menyertai desain loader ini dalam rupa fade effect yang disertai gerak membuka pada layar secara vertical. Yang sangat perlu diperhatikan ketika menggunakan jQuery loader adalah kondisi "ready to use" pada keseluruhan file, baik yang berupa image, javascript, css atau bentuk file lain seperti misalnya video (jika menggunakan). Jika salah satu saja file dalam blog dalam kondisi "mati/tidak dapat diakses" maka halaman blog tak akan mungkin terbuka. Jadi kesimpulannya sebelum menggunakan jQuery loader sebaiknya pastikan bahwa semua data blog benar-benar dalam kondisi "ready to use".

Cara Membuat jQuery Loader

  1. Login ke Blogger
  2. Halaman Dasbor (Dasboard)
  3. Klik Rancangan (Design)
  4. Klik Edit HTML
  5. Cari kode <head>
  6. Copy-Paste: Copy dan pastekan javascript dan kode CSS berikut di bawah kode <head>
    7. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
    <script src='http://jquery-loader.googlecode.com/files/jQuery-GR_loader.min.js' type='text/javascript'></script>
    <style type="text/css" media="screen">
    .QOverlay{background:#000;z-index:9999999;}
    .QOverlay:before,.QOverlay:after{display:block;position:absolute;left:0;text-shadow:0 0 15px #aaa;width:100%;text-align:center;font-size:16px;font-weight:bold;}
    .QOverlay:before{color:#666;top:350px;content:"Refresh jika loading terlalu lama ....!!!"; }
    .QOverlay:after{top:250px;color:#f00;content:"Loading...";text-decoration:blink;}
    .QLoader{background:#ccc;height:1px;}
    </style>
  7. Cari kode </body>
  8. Copy-Paste: Copy dan pastekan javascript berikut di atas kode </body>
    9. <script type="text/javascript">
    QueryLoader.selectorPreload = "body";
    QueryLoader.init();
    </script>
  9. Klik kode Save Template
  10. Cek hasilnya dengan membuka blog!

Keterangan/Catatan:
  • Buka menu Special Tutorials di deret menu sebelah kiri jika membutuhkan panduan tentang cara menyimpan kode HTML dan cara cepat mencari kode HTML menggunakan Ctrl + F
  • Jika sebelumnya blog telah menggunakan jQuery-1.3.2.min.js atau jQuery yang setara dengan fungsi jQuery-1.3.2.min.js, cukup gunakan satu buah jQuery saja.
  • Loader blog kompatibel untuk jQuery v1.2.3 s/d v.1.5.2
  • Loader blog tidak kompatibel untuk jQuery v1.6.0.s/d v1.7.1
  • Apabila menginginkan loader terlihat lebih awal (secepatnya setelah buka blog), pindahkan kode css-nya di atas </body> sehingga bentuk penataan kodenya (yang di atas </body>) menjadi seperti berikut:
    Model Penyimpanan yg lain
    <style type="text/css" media="screen">
    .QOverlay{background:#000;z-index:9999999;}
    .QOverlay:before,.QOverlay:after{display:block;position:absolute;left:0;text-shadow:0 0 15px #aaa;width:100%;text-align:center;font-size:16px;font-weight:bold;}
    .QOverlay:before{color:#666;top:350px;content:"Refresh jika loading terlalu lama ....!!!"; }
    .QOverlay:after{top:250px;color:#f00;content:"Loading...";text-decoration:blink;}
    .QLoader{background:#ccc;height:1px;}
    </style>

    <script type="text/javascript">
    QueryLoader.selectorPreload = "body";
    QueryLoader.init();
    </script>
  • untuk menampilkan gambar (image) pada loader, tentukan gambar dan ukuran tinggi gambar, kemudian tambahkan di kode CSS. Contoh perubahannya seperti berikut:
    Menambah image di loader blog script:
    <style type="text/css" media="screen">
    .QOverlay{background:#000;z-index:9999999;}
    .QOverlay:before,.QOverlay:after{display:block;position:absolute;left:0;text-shadow:0 0 15px #aaa;width:100%;text-align:center;font-size:16px;font-weight:bold;}
    .QOverlay:before{color:#666;top:350px;content:"Refresh jika loading terlalu lama ....!!!"; }
    .QOverlay:after{top:250px;color:#f00;content:"Loading...";text-decoration:blink;}
    .QLoader{background:#000 url(backround-image.jpg) center no-repeat;height:200px;}
    </style>
  • Sumber: http://www.gayadesign.com/


Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Jemuah PON, February, 24, 2012

» Happy Blogging - gubhugreyot «

Comments

Post a Comment