| Farkryzer The Second Generation v.2.1 | Copyright © 2012 Friski G.P. Powered by Blogger |

Mau tukeran link dengan blog ini ? Kesini Sobat

Site Rank

PageRank

Buku Tamu

W3 Directory - the World Wide Web Directory
Mau tahu cara buat widget tersembunyi seperti ini ? Baca tutorialnya disini full css lebih ringan dari javascript

Farkryzer Post Section

... Selamat membaca ...

Membuat status loading ketika memuat halaman blog


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

28 komentar:

  1. mantab bro blog'a....keren abiss....
    happy blog walking yaa bro...http://belajarseo.site40.net

    BalasHapus
  2. wah keren mas! :)
    izin follow sini ya mas :)

    BalasHapus
  3. @Bayu Aldi Yansyah: terima kasih sob, saya follow balik ...

    BalasHapus
  4. maaf 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

    BalasHapus
  5. Sipp,, Keren nigh,
    Nice share Masbroth

    BalasHapus
  6. infonya menarik. wahhhh backroundnya anime, ada fairy tail juga. kunjungan pertamanih , salamkenal. saya follow dulu ya blognya. saya tunggu follow baliknya :D

    BalasHapus
  7. @sampeweweh: di blokkir ? lagipula bini kan tdk menghilangkan body tapi menambahkan beberapa script didalamnya, saya rasa tdk apa-apa

    @Mharjipes: sama-sama sob

    @Asep Saepurohman: saya suka anime itu btw saya follback sob

    BalasHapus
  8. hmmm...info yang menarik....
    makasih yach...

    di setiap postingan kami ada kok untuk link dengan bolg kerajaanairmata

    BalasHapus
  9. jadi berat di pake, aq hapus lagi deh :D

    BalasHapus
  10. @ayano rosie: sama-sama :)

    @Persadablog: oke sob hehe ... tapi buat saya ga membuat berat :D

    BalasHapus
  11. mantap ni triknya.. template blog anda keren ya.. suka manga ya?

    BalasHapus
  12. @raj: haha iya sob saya sudah termasuk golongan mania

    BalasHapus
  13. Terima kasih sobat atas berbagi tipsnya nih..
    Boleh dicoba nih

    BalasHapus
  14. @cardiacku: sama-sama sob, silahkan dicoba ...

    BalasHapus
  15. oooo 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

    BalasHapus
  16. thanks infonya~

    Kunjungi balik ya ... skalian mnta follownya :)

    BalasHapus
  17. Keren Masbrooo ini Yang aku tunggu segera di Coba

    BalasHapus
  18. Ngomong2 kok Float nya center ya, Apakah ada float center. . . .??

    BalasHapus
  19. @system of blog: saya salah memang tidak ada center untuk float thx sob dah mau membenarkan hehe maklum manusia ga ada yg sempurna :D

    BalasHapus
  20. kren sob B)
    ane baru di dunia blog
    membantu bngt nih..
    thanks sob :D

    btw, ane mau tanya, css itu yg di desain > tingkat lanjut > Tambahkan CSS??

    BalasHapus
  21. @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

    BalasHapus
  22. ngerti2 =D
    cuma td agak bingung aja yg edit html yg mna.. udh ktemu td... arigato gozaimasu

    BalasHapus
  23. kok waktu loadingnya selesai animasinya gk hilang
    kenapa itu ka?

    BalasHapus
  24. bagus sekali ni
    terima kasih atas tutorialnya, keren sekali

    BalasHapus

Share entri ini :