Memberi Efek Loading Pada Blog with jQuery

Posted by Wahyu basofii on Senin, 01 Juli 2013

efek loading - wahyu only
Berbeda dengan efek loading yang pernah saya posting dahulu yaitu  Animasi Loading, dengan yang sekarang ini yang akan saya bagikan kepada Anda semua,khususnya para blogger indonesia (kok jadi nglantur ya ngomongnya...hehehe) yaitu Efek Simple Loading Pada Blog dengan jQuery yang menurut saya cukup simple.

Sebenarnya tidak jauh berbeda pada animasi loading, kalau animasi loading ada animasinya yaitu berbentuk bola yang berputar, tapi efek loading kali ini cukup sederhana yaitu membuat layar menjadi blank ketika loading (bukan lagi hank ya pc nya), lebih tepatnya efek yang menyembunyikan atau menunjukkan suatu elemen dengan memudar.

untuk bagian demonya bisa klik link dibawah ini

Untuk cara pemasangan bisa anda lihat di bawah ini

1. Masuk ke blog anda
2. Kemudian pilih Template
3. Untuk berjaga-jaga jangan sampai terjadi kesalahan, Download Full Template anda terlebih dahulu
4. Selanjutnya pilih EDIT HTML

5. Klik di manapun dalam kode area lalu tekan CTRL + F dan cari kode </head>

6.Copy kode dibawah ini tepat diatas </head> kemudian letakkan kode di bawah ini :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("body").css("z-index", "-10");
$("body").fadeIn(0);
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(500, redirectPage); });
function redirectPage() {
window.location = linkLocation;
}
});
//]]>
</script>
<style>
html {
background-color: #000000; /* Color fading */
}
</style>

7) Simpan perubahan .

Tambahan :
  •  Jika kode yang berwarna merah di blog Anda sudah ada maka, kode diatas tidak usah ditambahkan.
  • Untuk anda yang ingin menyesuaikan warna loading nya dengan warna lain, ganti tulisan #000000;  diatas dengan kode warna yang diinginkan untuk warna memudar dari loading ini.

Itulah sedikit tutorial tentang cara membuat efek loading pada blog, semoga Blog anda akan lebih cantik dengan menggunakan efek seperti di atas.
Judul : Memberi Efek Loading Pada Blog with jQuery
Label :
URL : http://wahyu-only.blogspot.com/2013/07/memberi-efek-loading-pada-blog-with-jquery.html

34 komentar:

  1. kirain jquery bikin loading :D hihi

    pertamax gan

    BalasHapus
    Balasan
    1. .haha bisa2 aja mas nya ini ...
      .pertamax hanya milik Ts :p

      Hapus
  2. wah demo nya keren masbro :D

    yaelah dapet keduaxx

    BalasHapus
    Balasan
    1. tulisan DEMO nya itu ya mas..hihihi ;)

      Hapus
  3. mantap tentang,,tapi ini bisa buat berat blog kagak nich

    BalasHapus
  4. wah bagus banget gan ..
    terimakasih untuk ilmunya :)

    BalasHapus
    Balasan
    1. sama sama mas.. thank s buat kunjunganya

      Hapus
  5. mantabs..efeknya bisa perlahan hilang kemudian muncul page yang asli...luarbiasa :-)

    BalasHapus
    Balasan
    1. hehe iya mas,,,makasih kunjunganya :D

      Hapus
  6. keren sih mas,, tapi apa nggak memberatkan blog...?

    #salam terhangat dari Misterdhi

    BalasHapus
  7. Dengan tampilan efek loading ini, bisa menghilangkan jenuh dg tampilan yg itu2 saja ya Mas.., terima kasih sharenya..:)

    BalasHapus
  8. wihaha keren gan jadi gelap gitu gan

    BalasHapus
    Balasan
    1. iya mas...makasih kunjunganya

      Hapus
    2. Iya mas sama-sama kunjungannya :)

      Hapus
  9. wew efek loading nya keren sob, seru nih kalo dipasang di blog

    BalasHapus
    Balasan
    1. sip..silahkan dipasang diblog kawan..

      Hapus
  10. share efek yg bisa bikin komputer hang aja sob hehe :D

    BalasHapus
    Balasan
    1. hehe... ntar ditimpuk sama orang orang mas :D

      Hapus
  11. kalau gitu ane simpan dulu gan, ntar rue di praktekin

    BalasHapus
  12. makasih bro, tapi bisa gk efek loadingnya di kasih gambar ?

    BalasHapus
    Balasan
    1. mendingan gak usah mas,,,ntar loadingnya tambah berat :D :p

      Hapus
  13. Balasan
    1. orang nya maksudnya yang keren :p

      Hapus
  14. ternyata tahapnya sangat mudah, tinggal menambahkan kode diatas head. terimakasih.

    BalasHapus
  15. terkesan elegant sob , gak sia2 mampir kemari .. :-bd pas mantab .. postingannya ! salam kenal sob ..

    BalasHapus

------------------------------------------------------------------------------------------
Catatan:
• Dilarang menulis link aktif!
• Dilarang ngiklan di kolom komentar!
• Kritik dan Saran sangatlah dibutuhkan, agar blog ini menjadi blog
yang lebih berkualitas.

Thank's
------------------------------------------------------------------------------------------


Flag Counter