Cara membuat efek loading blog keren


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.

Subscribe to receive free email updates:

54 Responses to "Cara membuat efek loading blog keren"

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

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

    ReplyDelete
    Replies
    1. hehe oke sob, makasih dan sama sama :)

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

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

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

    ReplyDelete
  6. keren banget tipsnya gan.. patut dicobaa

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

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

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

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

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

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

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

    ReplyDelete
  14. Manteb gan...
    bisa dicoba dech :)

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

    ReplyDelete
    Replies
    1. hah gitu ya sob, kan tidak ada loadingnya sob, jadi tidak dipasang aja, bukankah begitu?

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

    ReplyDelete
  17. :101 mantap nih sob...

    terimakasih untuk tutorialnya

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

    ReplyDelete