Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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>
  8. Cari kode </body>
  9. Copy-Paste: Copy dan pastekan javascript berikut di atas kode </body>
  10. <script type="text/javascript">
    QueryLoader.selectorPreload = "body";
    QueryLoader.init();
    </script>
  11. Klik kode Save Template
  12. 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 «

13 komentar:

  1. to gubhug reyot...

    jika mau ganti gmbr / image loading dengan upload gmbr / image sendiri, penyimpanan kodenya dimana ?
    NEED PENCERAHANNYA...

    TANK NABRAK KAYU = TANK KIYU....

    MAJU TERUSSSSSSSSSS G.R

    BalasHapus
  2. Pro: ™(((((T_boMb)))))™

    Untuk ganti gambar loader blog silahkan baca kembali tutorial yang telah di update pada hari ini, 24 Feb 2012.

    Salam ...

    gubhugreyot

    BalasHapus
  3. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  4. to G.R..
    intrupsi gan..
    knp kmrin pas d cb work, tp pas d cb lg k g work malah layar blank hitam ky gini...

    http://i40.tinypic.com/2i745k2.jpg

    BalasHapus
  5. to admin G.R...

    bagaimana cara menyatukan(edit)& bagaimana cara penyimpanan source2 js, css, dll yg terpisah-pisah hasil download sehingga bs disimpan di edit html / edit elemen laman(add widget).
    contoh pd web ini http://css-tricks.com/downloads/.
    contoh sy download SLIDE TO UNLOCK, disitu ada button FANCY VIEW SOURCE nah mulai di sini sy MENTOK alias BLANK(d taruh dimana source trsbt ?)...
    akhirnya sy download zip trsbt setelah d donlot ada bbrp file nah d sini sy MENTOK alias BLANK lagi(edit & menyatukannya gimana ? )....
    yg ingin sy tanyakan bagaimana cr edit & penyimpanannya ?? hingga bs d taruh d blog...

    sblm & ssdhnya TANK KIYU sdh meluangkan waktu membca psn sy ini, maklum NEWBIE jd byk bertnya...drpd ppth mengatakn malu bertanya sesat d jln yh mending byk bertanya ^_^...
    ORANG PINTAR beRawaL DARI BODOH & seLaLu MAU BELAJAR
    MAU BELAJAR&TAK KENAL MENYERAH iTu adLah KUNCI SUKSES
    KESEMPURNAAN adaLah MILIK TUHAN&KEKURANGAN pasTi MILIK SAYA....
    No bodY is peRfeCT....

    saLaM...
    T_boMb.

    BalasHapus
  6. Pro: ™(((((T_boMb)))))™

    Menggunakan Loader blog di atas syaratnya:

    1. Semua file dalam blog (image, css, js dsb) harus dalam kondisi "ready to use". Jika salah satu saja "mati" karena "banned" atau sebab yg lain maka blog tak akan terbuka.
    2. Loader blog kompatibel untuk jQuery v1.2.3 s/d v.1.5.2
    3. Loader blog tidak kompatibel untuk jQuery v1.6.0.s/d v1.7.1.

    Saran:

    Jangan pernah gunakan file hosting selain blogger, google sites, google code dan keluarga google lainnya karena banyak kemungkinan file yang anda simpan akan musnah dengan berbagai sebab!

    Salam ...

    gubhugreyot

    BalasHapus
  7. "Slide To Unlock" hanya kompatibel di Google Chrome atau Safari. Tunggu saja hingga kompatibel di semua browser ternama/besar! Jika dipaksakan menggunakannya saat ini akan sia-sia saja!

    Salam ...

    gubhugreyot

    BalasHapus
  8. lha sekarang posisi neng ngendi? iseh neng ndeso kluthuk opo ws neng kutho klothak? nomer telpon sing aktif siong ngendi

    BalasHapus
  9. mau sore nelpon nomere mba acha (sing em3) ra nyambung,

    BalasHapus
  10. Aku lagi wis neng kutho klotak. Mau Acha sms. Wis di woco, rung? Nmr ngomah mau aktif wong d Chatrin ngerti nek di telpon tp ra krungu!

    BalasHapus
  11. OH.... sms-e mba acha blon masuk, nyangkut ktanggok code-code css opo ketanggok antena tv yawkwkwkkwkw.
    buat GRmania soriiii, ini kolom komen lg dipake buat ngobrol pribadi wkwkwkkwkw krn kirim sms skarang agak susah terkirim dikarenakan BBM mau dinaikkin lagi sama om es beyek :-))))))
    Setelah BBM dinaikin, komen2 ini mau dihapus

    BalasHapus
  12. Kuak... kuak ... kuak ... Separanen, dingapuro, maafkan daku sobat2 GR tercinta. Adik ku memang lagi angot, he... , he...., masa kirim SMS pake kolom komen! Ya... ya... ya... n'tar tak hapus, ko, habis bebeem di naikkin ma maz esbeye.
    Sampeyan2 jgn kwatir tutorialnya GR nggak ikut naik, lhoh! Tetap gratis... tis... tis... tis...
    Doakan aza agar tetap rajin ngepoz biar pantat semangkin tepoz.
    Kuak ... kuak .... kuak ....
    Trus wis ngebel rung dhik?! SMS ku wis tekan, rung, wong le kirim lewat
    http://gitosimin.blogspot.com
    SMS gratis biar bbm naik ya tetap gratis ... nyampe nggaknya juga nggak tentu wong ra kuat tuku bensin!

    BalasHapus

 
GR | Edited by | gubhug reyot