Sekarang saya akan sharing mengenai cara membuat status loading ketika memuat halaman blog
Well, bila sobat belum tahu dan masih bingung maksudnya silahkan lihat screenshot di bawah ini :
Status ini berguna bila sobat memiliki blog yang berat atau sekedar membuat blog menjadi lebih dinamis
Langkah - langkahnya yaitu :
1. Masuk ke Template >>> Edit HTML
2. Cari kode <body> kemudian ganti dengan script dibawah ini :
<body onLoad='init()'><div id='loading''> <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYMuyg0U1Q7ppofWq_FreULKP0wP5Z1v6uDblpeTRAzhtkz7HNtVO51Arsf6wwWXSBLEl27J4h4W2ddRVvIIM77NiqGP40-iAt2PRK9qNWsvoSNv7DfCidFra0_8ikeJh-O8x7jvSiPprt/s1600/f2.gif'/></div> <script src='http://farkryzer-script.googlecode.com/files/loading.js' type='text/javascript' type='text/javascript'/>
Note: yang saya warnai kuning adalah gambar loading dari statusnya, silahkan ganti sesuai dengan keinginan sobat, dibawah ini beberapa macam gambar yang bisa sobat pilih (gambar ringan tidak lebih dari 10kb dan rata-rata 5kb) :
3. Langkah terakhir simpan kode css ini di template sobat, jika bingung silahkan tempatkan di atas kode ]]></b:skin> :
#loading{padding: 15px;border: 1px solid
#000;border-radius:3px;background-color:#f5f5f5;opacity:.8;filter:alpha;margin:auto;width:435px;text-align:center}
Note: yang saya warnai orange bisa sobat ganti sesuai dengan keinginan
Note: script css diatas berguna untuk mengatur tampilan dari status loading yang dipasang di blog sobat.
4. Simpan dan kemudian lihat hasilnya.
5. Apabila ada yang ditanyakan seputar trik ini silahkan buat komentar di entri ini.
EDIT STATUS LEBIH DALAM
Ini hanya tambahan saja, silahkan simak tujuannya untuk memasukan tulisan maupun link pada status loading jadi tida hanya kosong dengan gambar loading saja.
Oke lihat dulu script di bawah ini :
<body onLoad='init()'><div id='loading'> <p>Halaman sedang dimuat</p><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYMuyg0U1Q7ppofWq_FreULKP0wP5Z1v6uDblpeTRAzhtkz7HNtVO51Arsf6wwWXSBLEl27J4h4W2ddRVvIIM77NiqGP40-iAt2PRK9qNWsvoSNv7DfCidFra0_8ikeJh-O8x7jvSiPprt/s1600/f2.gif'/> <p>Apabila waktu muat relatif lama, silahkan menggunakan tampilan <a href='http://farizky234.blogspot.com/?m=1'>ini</a></p> <div style='text-align:right'><p>Farkryzer Admin</p></div></div> <script src='http://farkryzer-script.googlecode.com/files/loading.js' type='text/javascript'/>
Bila sobat sudah pintar css tentu saja cara ini lebih mudah diterapkan sendiri. Oke saya jelaskan satu persatu.
Note: yang saya warnai merah tebal dengan <p> sampai </p> itu menandakan kita akan menambahkan tulisan, masukan tulisan yang sobat inginkan antara kode <p> dan </p> sehingga seperti contoh ini : <p>Farkryzer The Second Generation</p> untuk letaknya tempatkan setelah <div id='loading'> dan </div>
Note: untuk link gunakan kode HTML dengan aturan <a href='alamat link'>nama link</a> yang saya warnai merah silahkan sobat ganti sesuai keinginan.
Setelah itu simpan kemudian lihat haslinya
mantab bro blog'a....keren abiss....
BalasHapushappy blog walking yaa bro...http://belajarseo.site40.net
@belajar seo: makasih sob ...
BalasHapuswah keren mas! :)
BalasHapusizin follow sini ya mas :)
@Bayu Aldi Yansyah: terima kasih sob, saya follow balik ...
BalasHapusmaaf sobat, tapi dulu awal ngeblog masang ini juga, cuman ngilang kode body itu bisa bikin blog di banned lho. makanya saya apus sob . itu dulu sih, kalo sekaarang nggak tau sob
BalasHapussinggah malam
BalasHapusSipp,, Keren nigh,
BalasHapusNice share Masbroth
infonya menarik. wahhhh backroundnya anime, ada fairy tail juga. kunjungan pertamanih , salamkenal. saya follow dulu ya blognya. saya tunggu follow baliknya :D
BalasHapus@sampeweweh: di blokkir ? lagipula bini kan tdk menghilangkan body tapi menambahkan beberapa script didalamnya, saya rasa tdk apa-apa
BalasHapus@Mharjipes: sama-sama sob
@Asep Saepurohman: saya suka anime itu btw saya follback sob
hmmm...info yang menarik....
BalasHapusmakasih yach...
di setiap postingan kami ada kok untuk link dengan bolg kerajaanairmata
jadi berat di pake, aq hapus lagi deh :D
BalasHapus@ayano rosie: sama-sama :)
BalasHapus@Persadablog: oke sob hehe ... tapi buat saya ga membuat berat :D
mantap ni triknya.. template blog anda keren ya.. suka manga ya?
BalasHapus@raj: haha iya sob saya sudah termasuk golongan mania
BalasHapusTerima kasih sobat atas berbagi tipsnya nih..
BalasHapusBoleh dicoba nih
@cardiacku: sama-sama sob, silahkan dicoba ...
BalasHapusoooo begitu ya caranya, apa malah ndak bikin berat blog kita bro?biasanya blog yang pake loading gituan tuh lama lo.tapi ilmunya bermanfaat sekali hehe makasih ya, siapa tau ane minat pasang
BalasHapusthanks infonya~
BalasHapusKunjungi balik ya ... skalian mnta follownya :)
@Amalia_key: sama - sama :)
BalasHapusnice info sob...
BalasHapusKeren Masbrooo ini Yang aku tunggu segera di Coba
BalasHapusNgomong2 kok Float nya center ya, Apakah ada float center. . . .??
BalasHapus@system of blog: saya salah memang tidak ada center untuk float thx sob dah mau membenarkan hehe maklum manusia ga ada yg sempurna :D
BalasHapuskren sob B)
BalasHapusane baru di dunia blog
membantu bngt nih..
thanks sob :D
btw, ane mau tanya, css itu yg di desain > tingkat lanjut > Tambahkan CSS??
@Shera_Spica: secara sungkat css itu untuk desain dari tag-tag html, yg tingkat lanjut maksudnya kalo mau edit script html tadi sesuka kamu, tambahkan css ya itu masukan script cssnya di template kamu, ga ngerti ya ? memang agak susah menjelaskannya
BalasHapusngerti2 =D
BalasHapuscuma td agak bingung aja yg edit html yg mna.. udh ktemu td... arigato gozaimasu
kok waktu loadingnya selesai animasinya gk hilang
BalasHapuskenapa itu ka?
bagus sekali ni
BalasHapusterima kasih atas tutorialnya, keren sekali