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

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>

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

Cari kode </body>
Copy-Paste: Copy dan pastekan javascript berikut di atas kode </body>

<script type="text/javascript">
QueryLoader.selectorPreload = "body";
QueryLoader.init();
</script>

Klik kode Save Template
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 «

12 komentar:

T_bǿMb Jr. ™23 Februari 2012 pukul 17.52
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
Balasan
cah ndeso kluthuk24 Februari 2012 pukul 03.39
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
Balasan
T_bǿMb Jr. ™24 Februari 2012 pukul 14.40
Komentar ini telah dihapus oleh pengarang.
BalasHapus
Balasan
T_bǿMb Jr. ™24 Februari 2012 pukul 15.06
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
Balasan
T_bǿMb Jr. ™24 Februari 2012 pukul 16.23
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
Balasan
cah ndeso kluthuk24 Februari 2012 pukul 18.05
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
Balasan
cah ndeso kluthuk24 Februari 2012 pukul 19.05
"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
Balasan
paknephael25 Februari 2012 pukul 07.18
lha sekarang posisi neng ngendi? iseh neng ndeso kluthuk opo ws neng kutho klothak? nomer telpon sing aktif siong ngendi
BalasHapus
Balasan
paknephael25 Februari 2012 pukul 07.23
mau sore nelpon nomere mba acha (sing em3) ra nyambung,
BalasHapus
Balasan
cah ndeso kluthuk25 Februari 2012 pukul 08.53
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
Balasan
paknephael25 Februari 2012 pukul 09.45
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
Balasan
cah ndeso kluthuk25 Februari 2012 pukul 10.05
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
Balasan

Tambahkan komentar

gubhug reyot

Keterangan Penting

Cumulus swf - flash

Categories

Arsip...

Flag Counters

Pengikut

Recent Comments plus Kode CSS Box Gelap

Vertical Menu

Download Browser

Widget

CSS 3

Special Tutorials

Javascript-JQuery

Blog-Email-Modem

File Hosting

Promosi Blog

Adobe-Image-Animasi

Tutorial BlogDETIK

New BloGGER Templates

Panduan BloGGeR

Tutorial Blogger

Tips-Trik Blogger

Pengilon

Ge-eR

Sobat Ngeblogh