.jpg)
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
Keterangan/Catatan:
Update » Jemuah PON, February, 24, 2012
Cara Membuat jQuery Loader
- Login ke Blogger
- Halaman Dasbor (Dasboard)
- Klik Rancangan (Design)
- Klik Edit HTML
- Cari kode <head>
- Copy-Paste: Copy dan pastekan javascript dan kode CSS berikut di bawah kode <head>
- Cari kode </body>
- Copy-Paste: Copy dan pastekan javascript berikut di atas kode </body>
- Klik kode Save Template
- Cek hasilnya dengan membuka blog!
<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><script type="text/javascript"> QueryLoader.selectorPreload = "body"; QueryLoader.init(); </script>
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 «
to gubhug reyot...
BalasHapusjika mau ganti gmbr / image loading dengan upload gmbr / image sendiri, penyimpanan kodenya dimana ?
NEED PENCERAHANNYA...
TANK NABRAK KAYU = TANK KIYU....
MAJU TERUSSSSSSSSSS G.R
Pro: ™(((((T_boMb)))))™
BalasHapusUntuk ganti gambar loader blog silahkan baca kembali tutorial yang telah di update pada hari ini, 24 Feb 2012.
Salam ...
gubhugreyot
Komentar ini telah dihapus oleh pengarang.
BalasHapusto G.R..
BalasHapusintrupsi 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
to admin G.R...
BalasHapusbagaimana 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.
Pro: ™(((((T_boMb)))))™
BalasHapusMenggunakan 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
"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!
BalasHapusSalam ...
gubhugreyot
lha sekarang posisi neng ngendi? iseh neng ndeso kluthuk opo ws neng kutho klothak? nomer telpon sing aktif siong ngendi
BalasHapusmau sore nelpon nomere mba acha (sing em3) ra nyambung,
BalasHapusAku 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!
BalasHapusOH.... sms-e mba acha blon masuk, nyangkut ktanggok code-code css opo ketanggok antena tv yawkwkwkkwkw.
BalasHapusbuat 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
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.
BalasHapusSampeyan2 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!