Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogger

Cara membuat efek loading blog keren

Oleh Hermanbagus 53 komentar

Kali Ini Hermanbagus mengajak teman teman untuk bermain css pada blog :), walaupun dalam dunia nyata saya sebenarnya sibuk, hingga hingga kurang istirahat karena jam kerja yang tidak pasti , saya usahakan, saya sempatkan tetap update blog dan blogwalking seperti biasanya, walaupun tidak bisa penuh / full 100 % saya ucapkan mohon maaf,

waduh kok jadi cerita ya hehe
langsung deh sob ke tkpnya.

1. Login Akun blog sobat.
2.Masuk Template
3. Centang Expand Template Widget
4. Copy dan paste kode berikut ini dibawah kode </head>

<!-- Loading Page Script – vikrymadz – http://hermanbagus.blogspot.com -->
<style type="text/css">
/* add loading image */
body {background:#000000 url(http://4.bp.blogspot.com/-zJmT6iuz0Gs/TyKvHDEFtjI/AAAAAAAABso/Uf8IHNom-MM/s1600/loading_gif.gif) no-repeat fixed center;}
/* hide page div */
#page{display:none;}
</style>
<script type="text/javascript">
function css(classORid,rules){
try{var css=document.createElement("style");
css.innerHTML=classORid+"{"+rules+"}"
document.body.appendChild(css);}
catch(e){}
try{document.styleSheets[document.styleSheets.length-1].addRule(classORid,rules);}
catch(e){}}
function loaded(){
css("#page","display:block!important");
css("body","background:#000 url()");}
if(window.addEventListener)window.addEventListener("load",loaded,false);
else if(window.attachEvent)window.attachEvent("onload",loaded);
else if(document.getElementById)window.onload=loaded;
</script>


Kemudian

lalu cari kode <body>
lalu letakkan kode <div id="page"> dibawah kode <body>

Dan Cari lagi kode </body>
dan letakkan kode </div> diatas kode </body>
Kemudian simpan deh sob..

Dan lihat hasilnya, semoga bermanfaat dan lebih menarik tampilan blog sobat.

53 komentar untuk "Cara membuat efek loading blog keren"

  1. rezaJumat, 04 Januari, 2013

    thanks tipsnya kapan2 saya coba yach gak berat kan..?

    BalasHapus
  2. Staff AdministratorJumat, 04 Januari, 2013

    satu lagi nih..dapat tutor dari mas herman yg keren...ok mas.. lanjut hehe

    BalasHapus
  3. Tutorial inblogspotJumat, 04 Januari, 2013

    Wah keren gan, cara biar user teralihkan perhatiannya ketika nunggu loading blog hehehe

    BalasHapus
  4. MizTiaJumat, 04 Januari, 2013

    bikin berqat ga?? , aku pernah lihat ada yg pake loadingnya gmbr logo.. iya menarik .

    BalasHapus
  5. DiansahJumat, 04 Januari, 2013

    Keren sob... akan terlihat seperti web profesional yah sob... mantap :108

    BalasHapus
  6. UnknownJumat, 04 Januari, 2013

    keren banget tipsnya gan.. patut dicobaa

    BalasHapus
  7. AnonimJumat, 04 Januari, 2013

    sibuk, tp ttp axis posting ya sob.. :146
    bertugas sob.. klw smpet mampir yah, hehe

    BalasHapus
  8. HanifJumat, 04 Januari, 2013

    kalo scribe yang pake css3 ada nggak sob? jadinya nggak pake gambar .gif

    BalasHapus
  9. Rizal UyeJumat, 04 Januari, 2013

    pasti buat berat ya mas?

    BalasHapus
  10. Sigli CyberJumat, 04 Januari, 2013

    wihh ,, keren juga,,ada gambar gif yg laen gk..??

    BalasHapus
  11. PESEdit 2013 Patch 2.7Jumat, 04 Januari, 2013

    demonya yang mana ya bos

    BalasHapus
  12. liongJumat, 04 Januari, 2013

    wah mantep juga, tapi ada yg lebih mantep bro, yg loadingnya kyk suatu program berputar2, :101

    BalasHapus
  13. UnknownJumat, 04 Januari, 2013

    Mantab Gan, tapi apa gak menambah beban Blog jdi tambah Lambat LOading Gan???

    BalasHapus
  14. Miss N™Jumat, 04 Januari, 2013

    Nice sharing Herman...

    BalasHapus
  15. Luhur FatahJumat, 04 Januari, 2013

    makasih bang..mungkin kpn2 akan saya coba....

    BalasHapus
  16. UnknownJumat, 04 Januari, 2013

    Keren... boleh nih di praktekin...
    oh iya aku minta maaf beberapa hari kemarin jarang berkunjung, krn ya begitulah... hehe... maaf yaa :189

    BalasHapus
  17. TiranaAdukaJumat, 04 Januari, 2013

    met sore kang herman bagus

    BalasHapus
  18. Mas AdhieJumat, 04 Januari, 2013

    Manteb gan...
    bisa dicoba dech :)

    BalasHapus
  19. UnknownJumat, 04 Januari, 2013

    pengen bikin yang tanpa loading sob,,maksudnya begitu masuk ke blog langsung jreng gitu tanpa ada loadingnya gimana tuh? sikat beres disini bawah.

    BalasHapus
    Balasan
    1. HermanbagusMinggu, 06 Januari, 2013

      hah gitu ya sob, kan tidak ada loadingnya sob, jadi tidak dipasang aja, bukankah begitu?

      Hapus
  20. Krisna PrayogaJumat, 04 Januari, 2013

    keren banget efek nya sob thanks udah di share,..
    :146

    BalasHapus
  21. UnknownJumat, 04 Januari, 2013

    Artikel yg menarik BOs

    BalasHapus
  22. GhaniJumat, 04 Januari, 2013

    keren sob,,

    BalasHapus
  23. Kumpulan Desain Grafis | Blog DofollowJumat, 04 Januari, 2013

    Bikin berat gak sob.. :161

    BalasHapus
  24. UnknownSabtu, 05 Januari, 2013

    thanks yach sob tipsnya..

    BalasHapus
  25. Fikri ThufailySenin, 07 Januari, 2013

    :101 mantap nih sob...

    terimakasih untuk tutorialnya

    BalasHapus
  26. UnknownSabtu, 27 April, 2013

    thanks gan

    BalasHapus
  27. UnknownJumat, 06 September, 2013

    makasih gan...pas banget buat blogger newbie sperti saya....hehe

    BalasHapus