Membuat Animasi Loading Blog

Membuat Animasi Loading Blog
Membuat Animasi Loading BlogMembuat Animasi Loading Blogspot - Animasi loading blog bisa memberikan efek manipulasi terhadap loading blog agar nampak lebih cepat, disini saya menggunakan script animasi loading dari DTE :] kemudian saya padukan dengan CSS3 Loading Animation dari Alessio Atzeni.
Script animasi Loading DTE :] menyeleksi semua link internal yang akan diberikan animasi loading, dan tentunya anda dapat memodifikasi lagi Script tersebut sesuai keinginan anda.

CSS3 Loading Animation Loop


Memasang Animasi Loading ke Blogspot

Tambahkan KODE CSS Animasi Loading Blog ini diatas ]]></b:skin>
#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg);  }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}
Kemudian Tambahkan JQuery ini diatas </head>, disini saya menggunakan Jquery versi 1.7.2 (Pasang jika belum ada Jquery di Template anda)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
Langkah terakhir, pasang Script dibawah ini diatas tag </body>
<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</div>
<script type='text/javascript'>
$(function() {
    var siteURL = "http://" + top.location.host.toString();
    var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
    $internalLinks.click(function() {
        $('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
    });

    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
    $('#loadhalaman').click(function() {
        $(this).hide();
    });
});
</script>
Untuk demo Animasi Loading Blog, saya tidak menyertakannya, anda bisa melihat langsung di blog ini, selamat mengoprek :))
Bagikan ke Teman ›
om-dayz lintasme
om-dayz facebook share
om-dayz Tweet Button
om-dayz digg Submitter

116 komentar Untuk Membuat Animasi Loading Blog

  1. Mohon maaf, postingan asli tidak sengaja terhapus begitu pula dengan komentar-komentar yang telah ada =(

    BalasHapus
    Balasan
    1. om, cara mengoprek detik loadingnya mana?

      Hapus
    2. Utak-atik bagian ini masbro...
      $('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);

      Hapus
    3. bos, kalu semua link dipakai loading semua gimana....hehehe..
      itukan cuma hostnya saja

      Hapus
    4. script diganti ini

      // #tancap adalah id nya
      // contoh id="tancap" href=".../"
      $(function() {
      $('#tancap').click(function() {
      if( $("#loadhalaman").is(":hidden") ) {
      $("#loadhalaman").fadeIn(15).delay(6000).fadeOut(1000);
      }
      else
      {
      $("#loadhalaman").hide(10);
      }
      });
      });

      Hapus
    5. script diganti ini

      // a adalah url link blog
      // ini untuk semua link
      $(function() {
      $('a').click(function() {
      if( $("#loadhalaman").is(":hidden") ) {
      $("#loadhalaman").fadeIn(15).delay(6000).fadeOut(1000);
      }
      else
      {
      $("#loadhalaman").hide(10);
      }
      });
      });

      Hapus
    6. gan gw boleh minta link loading nya gk gan

      Hapus
  2. iya bang tar pasti dicoba, itu warna dll bisa dimodfikasi kan ?

    BalasHapus
    Balasan
    1. bisa kok, tinggal edit bagian CSSnya :)

      Hapus
  3. Balasan
    1. hahahha, bisa ajah neh, padahal nothing special di blog ini :\

      Hapus
    2. iya, nothing spesial =( =( cuma adminnya homookk aja =( =(

      Hapus
  4. weh komeng ane ilang juga nih,haha,,,,
    padahal udah dicoba dan hasil mantrap..
    komeng lagi ah :D

    BalasHapus
    Balasan
    1. heheh, iyaa nih, salah teken jadinya ngilang deh :(

      Hapus
  5. ini buat di blogspot bang? kalau di wordpress atau website bisa tidak?
    terima kasih

    BalasHapus
    Balasan
    1. bisa kok, tinggal sesuain ajah elemen"nya :)

      Hapus
  6. cakep dah,,bener-bener dark dan warna itu merah,,cocok..
    thanks bang

    BalasHapus
  7. bang minta templatenya dong ! please

    BalasHapus
  8. Your blog posts and articles are very interesting, and gave me the info is pretty good, and I will be back to see your next posts and articles ... thank you

    BalasHapus
  9. keren nih gan bisa juga untuk mempercantik blog . .

    BalasHapus
  10. makasih dah gan nanti bila ada waktu syaa terapkan pad blog saya . .

    BalasHapus
  11. asal dari template ini apa bang !

    BalasHapus
    Balasan
    1. kasi tauuu nggak yaaaaaaaaaaaaa :D

      Hapus
  12. Sob, ini warna loading ga isa diganti warna ya?

    BalasHapus
    Balasan
    1. bisa kok mas, tinggal edit bagian CSSnya ajah..

      Hapus
  13. waw super sekali, sumpah ya ini template terkeren \o/ yg pernah ane lihat...

    BalasHapus
    Balasan
    1. hehe, lebay bgt mas yg satu ini :p

      Hapus
  14. wahhh keren banget om.... ini yang di pake blogazine yang selama nih ku lihat.....

    BalasHapus
    Balasan
    1. heheh, iyaa masbro.. emng keren animasi mastah Alessio Atzeni ini :yaya:

      Hapus
    2. xV wahhh mang sob.. makasih ya udah mau di share....

      Hapus
  15. wah..
    mantap nih sob infonya..
    saya tunggu yg lebih keren lagi sob...

    #Salam sukses dari saya

    BalasHapus
  16. Mantap Infonya Omz
    Jgn Lupa Mampir
    Ke sini

    BalasHapus
  17. SANGAT BERMANFA'AT JANGAN LUPA TUK KUNJUNGAN BALIKNYA ^:D

    BalasHapus
  18. ada award buat kmu nii...silahkan diambil..
    http://whatevercoool.blogspot.com/2012/10/first-award-dari-kak-raradanessa.html

    BalasHapus
  19. Artikelnya Bermanfaat Sekali Sobb..

    Makasih Ya...

    Jgn Lupa Mampir Di Blog Ane Juga...

    Klik Disini..

    Salam Bloggers/Blogwalking

    BalasHapus
  20. Assalamu'alaikum warahmatullahi wabarakatuh,
    Alhamdulillah kita masih diberi ALLAH SWT , nikmat umur buat menyambut Idul Adha tahun ini,
    semoga rahmat dan karunia ALLAH SWT selalu menyertai kita semua,
    selamat merayakan Hari Raya Idul Adha,
    bila ada salah dan khilaf dalam kata serta sikap selama ini, mohon di maafkan lahir dan batin.
    Wassalam

    BalasHapus
  21. Saya berharap semoga kedatangan kami sbagai spammer setiap harinya ke blog anda tidak menjadikan anda patah semangat untuk terus eksis di dunia bogger..
    selamat hari raya idul adha bagi seluruh umat muslim di indonesia..

    BalasHapus
  22. keren sekali tuh gan, aku ijin minta scrifnya.....

    BalasHapus
  23. Izin Menyimak Artikel Mu Sobbb....

    Jangan Lupa Koment Back Ya...

    Klik Disini..

    Salam Bloggers/Blogwalking

    BalasHapus
  24. Kren nih animationnya merah darah lagi :)

    BalasHapus
  25. keren ni tampilan tamplatenya....

    BalasHapus
    Balasan
    1. gokil om dayz blognya makin keren aja nih,saya banyak ketinggalan nih semenjak vakum dari dunia blogger

      Hapus
  26. template-nya serem gan ditambah animasi loadingnya klop bgt

    BalasHapus
  27. wah sepertinya ini bisa gantiin loading blog ane nih sob.. hehe

    BalasHapus
  28. wah keren, terinspirasi dari mana gan bisa sampe gitu keren lah !!


    blogwalking ya ke blog ku :)
    http://rakuplus.blogspot.com

    BalasHapus
  29. keren bg :-bd :-bd :-bd
    udah dipraktekin...


    blogwalking ke blogku ya bg.. ^_^ blog baru hehehe.. buat tugas sekolah skalian belajar
    http://yudhistira-satya.blogspot.com

    BalasHapus
  30. numpang nyiceplah . wkkwwkw

    banyak yang niru templatenya lagi ne om :D
    sabar ya om ..

    BalasHapus
  31. akan dipasang lah, lumayn buat menambah aksesoris di blog saya, makasih gan atas infonya. salam kenal.

    BalasHapus
  32. Selamat Sore Sobat.
    Artikelnya sangat bermanfaat :)
    Jangan Lupa Berkujung juga ya di http://incubame.blogspot.com/

    - Terimakasih -

    BalasHapus
  33. Luar biasa, lumayan rumit tapi akan akan dipelajari, semoga berhasil ni. makasih atas infonya gan.

    BalasHapus
  34. Info yang menarik, akan dicoba triknya, lumayan untuk menambah aksesoris di blog.

    BalasHapus
  35. gan kalo mw di Semua Halaman gimana

    Replace Segera


    Visit Back

    BalasHapus
  36. Kok ane ga bisa ya padahal udh ikutin kaya diatas.

    BalasHapus
  37. share template blog ini dong mas.....

    BalasHapus
  38. success om dayz...
    makasih :-bd

    BalasHapus
  39. oooh gitu ya caranya.. kasian ane... gaptek :'(

    blog ane gak bisa bagus :(

    BalasHapus
  40. can you send me the template of your current blog (Dark Himajie V.3)? send to:separatedblogger@gmail.com
    thanks very much

    BalasHapus
  41. wah keren gan.. ane ijin belajar disini ya..:)
    ane follow dulu gan..:)
    sitemapnya dimana ya?

    BalasHapus
  42. Aku benar-benar menikmati template ini.
    Dayz Hidayat, tiga kali Silakan, kirimi saya template ini ...
    I'm from brazil,
    I'm from the land of Ronaldinho
    --------
    thank you very much
    separatedblogger@gmail.com
    http://separatedblogger.blogspot.com.br/

    BalasHapus
  43. kk...
    saya mau tanya, warna loadingnya bisa diganti2?

    bisa kasih clue cara gantinya?

    BalasHapus
  44. mantap . sekaligus bisa mempercantik blog

    BalasHapus
  45. wow izin praktek

    blog'a keren ajjh

    BalasHapus
  46. gan uda gw coba tapi kok gak muncul yaa
    apa mungkin templatenya yang gak cocok??

    mohon bantuannya :)

    BalasHapus
  47. http://abrian-pamungkaz.blogspot.com/

    BalasHapus
  48. Busyet Dah !!!! Ajib Benerrrr!!

    Thx Infonya Gan ..... Sangat Bermanfaat Dan Sangat Menarik

    Mantab ! Tingkatkan Terus Ya Gan :D
    Ane langsung Praktekin :)


    Bagi Yang Suka Koleksi Hot Wheels, Silahkan Mampir Ke Blog Saya Oke !
    Kunjungi Blog Saya Ya Gan : http://Pusyakiz.blogspot.com/

    Terimakasih

    BalasHapus
  49. kak loading kaka kog padat gitu ya agak lebih hitam dan jelas beda ma yg kaka share nih loh. :W
    oia skali" share emoticon blog dong kak sama tema komentar :D

    BalasHapus
  50. maaf OOT, boleh nanya om, gimana sih caranya bikin komentar seperti blog ini ?

    BalasHapus
  51. om dayz tengok blogger ku http://aguzcreative.blogspot.com/

    BalasHapus
  52. utak-atik warna CSSnya dimana bro ?

    BalasHapus
  53. :W Saya Mau Nanya Nih OM-Dayz
    Gmana Yeah Buat Tampilan Seperti Klick Pada Emotion Itu.
    Kan Kalo Di klick Tampil Dalam Bentuk Sendiri Muncul Begitu.

    Mohon Respon Nya
    Thanks :-d

    BalasHapus
  54. alhamdulillah berhasil makasih mas...atas bagi2 ilmunya :)

    BalasHapus
  55. info yang sangat bagus sekal gan////

    BalasHapus
  56. efek loadingnya keren.. bagus buat mempercantik tampilan blog

    BalasHapus
  57. Keren banget Effect Loadingnya bro !
    Ane udah coba pasang di Blog ane ^^
    dan Hasilnya OKE !

    BalasHapus
  58. terimakasih banyak sob atas informasinya yang menarik

    BalasHapus
  59. lumayan nih informasinya membntu

    BalasHapus
  60. Blogwalking mas bro http://arikdkareel.blogspot.com

    BalasHapus
  61. makasi om Mantap dan benar2 sempurna...sy sudah menerapkan animasi blog ini dan berhasil om...

    Salam dan Sukses selalu.
    DEDY TUUK Blog Sharing™
    http://dedytuuk.blogspot.com


    BalasHapus
  62. keren kalau dari jauh sperti saringhan syurikhen hehe

    BalasHapus
  63. bikin kren blok nih,. thanks udah di share . . .

    BalasHapus
  64. Konten Adalah Raja Dan Backlink Adalah Ratu... Sebuah Blog Tidak Akan Pernah Bagus Jika Tidak Di Dukung Artikel Yang Berkualitas... www.okartikel.com

    BalasHapus
  65. ijin comot gan, sekalian melajarinya :D, makasih gan tutorialnya smoga bermanfaat bagi kita semua :D

    Poker Online
    Agen Poker Online
    Poker Online Indonesia

    BalasHapus
  66. thanks to your article
    i hope you can back visite my site

    http://goo.gl/JwQ4GD

    http://kidneyhasbiherbal.blogspot.co.id

    BalasHapus

Follow Me On Twitter Facebook Fanspage Circle Me On Google Plus Subscribe to RSS Feed