Membuat Efek Tampilan Loading Halaman Pada Blogspot

Membuat Efek Tampilan Loading Halaman Pada Blogspot - Kemarin sudah saya bahas tentang Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3, nah pada sore hari ini saya akan membahas masih seputar efek-efek pada blogspot, yaitu Membuat Efek Tampilan Loading Halaman Pada Blogspot. Efek loading disini yaitu ketika kita masuk kesebuah wesite/blog, sebelum kita dibawa ke hompage blog, kita akan diperlihatkan efek loading terlebih dahulu. Jadi intinya seperti ada jeda sebelum kita masuk ke homepage blog/website. Tahu kan maksud ane ??
Cara membuatnya kita hanya butuh code CSS dan sedikit polesan JQuery.

Yowes, biar makin jelas bisa Sobat lihat Demonya dibawah ini:


Tertarik ?? Bagi yang tertarik untuk membuatnya silahkan ikuti step by step berikut:

1. Seperti biasa login blogger sob!
2. Go to Design/Rancangan > Edit HTML > and ceklish pada "Expand Widget Templates"
3. Lalu cari kode  ]]></b:skin> dan letakan kode CSS berikut tepat diatasnya.

#loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000 url(URL_GAMBAR_ANDA) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.v2 #loading { display: none; }
 
#progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #f3f3f3;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#loader {
 background: url(<span style="background-color: #ea9999;">URL_GAMBAR_ANDA</span>) no-repeat center 25%;
 height: 100%;
 display: block;
}

Keterangan:
Perhatikan kode CSS diatas untuk URL_GAMBAR_ANDA
Gantilah gambar loading blognya sesuai kreasi sobat.
Tapi bila ingin seperti gambar yang ada pada DEMO, silahkan pakai gambar ini:
(http://1.bp.blogspot.com/-9K9BAhUu0do/T9Cz3dXy6GI/AAAAAAAABT8/SltgIprC7sQ/s1600/loading.gif)

5. Bagian kedua yaitu menambahkan script JQuery, cari kode </head> dan taruh script JQuery berikut tepat diatasnya:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Kalau script JQuery diatas sudah ada di blog sobat, maka tidak perlu lagi memasangnya.
Kemudian tambahkan lagi script berikut dibawahnya:

<script>
(function($){

$("html").removeClass("v2");

$("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) });

$(window).load(function(){
 
    $("#progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#loading").fadeOut("fast",function(){ $(this).remove(); });
    });
});
})(jQuery);
</script>

6. Next lanjut untuk edit HTML. Cari kode <body> letakan kode berikut tepat dibawahnya.

<div id='loading'>
<div id='progress-bar'></div>
<div id='loader'>Loading...</div>
</div>

7. Simpan template dan lihat hasilnya.

Tambahan:
Ingat, untuk hasil yang sudah kita buat diatas itu efek loadingnya disetiap halaman yang kita buka!
Jadi bagi kalian yang hanya ingin tampilan loading blognya hanya di Home Page'nya saja, silahkan ganti kode HTML pada langkah No.6 dengan kode dibawah ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='loading'>
<div id='progress-bar'></div>
<div id='loader'>Loading...</div>
</div>
</b:if>

Selesai sob! Selamat mencoba Membuat Efek Tampilan Loading Halaman Pada Blogspot, dan semoga sukses. Bila sobat mengalamai kesulitan dalam prakteknya bisa sobat langsung tanyakan dengan berkomentar pada tread ini.

99 komentar

  1. misi gan trick nya brhasil, cmn kalo mau kasih loading di url lain selain home page gmn ?

    tp bkn semua pake loading. cmn url yg di pilih aja..

    bisa gag ? di tunggu pencerahan nya ok gan.. ^_^

    BalasHapus
    Balasan
    1. Seperti penjelasan saya diatas, Loading hanya homepage atau next page saja. untuk loading di url tertentu saya blm mencobanya sob. :)
      Langkah tambahan

      Hanya di Homepage:

      <b:if cond='data:blog.url == data:blog.homepageUrl'>

      Dan untuk di next page:

      <b:if cond='data:blog.pageType == &quot;item&quot;'>

      Hapus
  2. EFeknya parah... masa g bisa edit page elemen?

    BalasHapus
    Balasan
    1. Apanya yg gak bisa diedit gan ?? :D
      Tingal diganti kodenya gan ^^

      Hapus
  3. Balasan
    1. Bagian mana yg belum bisa gan.. tanyakan saja :)

      Hapus
  4. wah boleh dicoba dulu nih, walopun kata yg diatas ane parah :(

    BalasHapus
  5. Wah... ini masternya blog... terima kasih atas share ilmunya.

    BalasHapus
    Balasan
    1. Berlebihan neh.. saya jg masih belajar masbro

      Hapus
  6. Mantap sob, Thanks infonya! It works like a charm for me :D

    Keren lah!

    Kalau sempat jangan lupa mampir ya ke http://www.kelasinformatika.com

    BalasHapus
  7. thenkyu sob tips untuk para blog...
    salam blogger n salam kenal..
    mampir ya sob,

    http://indra-combination.blogspot.com/

    BalasHapus
  8. mantap efek loadingnya.. tapi apa ga nambah berat pake tambahan seperti ini gan.. maaf saya kurang mengerti masalah coding..

    BalasHapus
    Balasan
    1. Jelas lah nambah kode CSS, javascrip atau apapun itu nambahin berat blog :D

      Jadi semua tergantung kalian sob :D

      Hapus
  9. Mantab bro ijin sedoot,follow back please

    BalasHapus
  10. Thanks gan,, Info nya mangabss.. :D

    BalasHapus
  11. banyak ilmu yang saya dapatkan disini, khususnya yang aku baca saat ini tentang efek tampilan, terimakasih dan salam ukhuwah wahai sauadaraku.

    BalasHapus
  12. terima kasih tips nya gan...
    izin saya repost di blog saya...

    BalasHapus
    Balasan
    1. wah...
      gaga jadi gan,,,
      di bukmak aja...
      hhe

      Hapus
    2. Dicoba lagi mas, udah ada demonya pasti bisa :D

      Hapus
  13. searching dan browsing kesana kemari akhirnya terbawa juga ke blog ini...

    tampilan loadingnya sungguh keren, tapi apakah ini tidak memperberat loading blog???

    mohon di balas gan..

    BalasHapus
    Balasan
    1. Sip mas, selamat mencoba :)
      Untuk masalah berat ya jelas mas, Nalarnya saha dengan menambah kode CSS/HTML pasti menambah size blog.

      Hapus
  14. artikel yang menarik,.,terima kasih untuk informasinya

    BalasHapus
  15. makasih kawan atas info dan ilmunya...

    di tunggu kunjungannya

    BalasHapus
  16. mas bro.. wah kren blognya sekarng udh lama gak mampir..

    BalasHapus
    Balasan
    1. Iya neh mas, lama gak login blogger. hohoo

      Hapus
  17. wah berhasil sukses mas admin.. visit ke blogku yya untuk melihat di ISLANKUDOTCOM

    BalasHapus
  18. wah, gambar loadingnya ngak timbul.

    BalasHapus
    Balasan
    1. Coba lagi gan, udah ada demonya pasti bisa koq...

      Hapus
  19. mantap sob,,,, tpi ada yg lainn gk nih sob efek loadingnya???

    BalasHapus
    Balasan
    1. Jelas ada banyak lah sob, tinggal dikreasikan sendiri.

      Hapus
  20. thanks gan http://mencakup-semua.blogspot.com/

    BalasHapus
  21. kalo aku nih loading gak mau berhenti gimana?

    BalasHapus
    Balasan
    1. Bisa juga karna koneksi gak lancar sob.
      Kalo mengikuti cara diatas dengan benar pasti gak ada masalah koq.

      Hapus
  22. boleh juga nih sob tutorialnya :)

    BalasHapus
  23. link back w gan..

    BalasHapus
  24. sudah saya aplikasikan. hasilnya menarik perhatian. hehe terima kasih gan.

    BalasHapus
  25. Kalau pakai cara ini .. yang kasian adalah yang koneksi internetnya lambat ... :)

    BalasHapus
  26. Mantap Nih Gan.. Thank's Ya Info Nya...

    BalasHapus
  27. thanks broo..efeknya bagus dan udah tak pasang di blog saya

    BalasHapus
  28. sore,

    saya bingung terhadapa lodingnya, apa bisa loadingnya di ganti sama gambar, misalkan banner. jadi bukan kyak gambar loading yg berputar"

    kalau saya ganti gambar, gambar yg saya masukkan ke link tidak muncul

    terimakasih

    BalasHapus
    Balasan
    1. lah itu juga efek loadingnya juga gambar mas, jadi pasti bisa diganti gambar lain.

      Hapus
  29. yg gambar sudah berhasil ,
    terimakasih

    1 lagi mas,

    apa kah bisa loadingya agak lama, timernya :)

    terimakasih

    BalasHapus
    Balasan
    1. Bisa masbro, perhatikan script fungsion di langkah no5.

      $("#progress-bar").stop().animate({ width: "100%" },600,function()

      Perhatikan kode script di atas, pada angka 600, runag menjadi 2000 ketas, semakin ditambah maka akan semakin lambat, begitu juga sebaliknya.

      Hapus
  30. ini yang saya cari2 dari tadi
    thax mas langsung praktek :D

    BalasHapus
  31. saya ada penawaran nih,,,,,,
    mw ikut Scout Clan gx ???
    Community Creative Blogger
    .::[ http://scout-clan.blogspot.com ]::.

    MY Blog: http://rully-sc.blogspot.com
    Please Visit Back

    BalasHapus
  32. mo coba ah...makasih tips nya...

    BalasHapus
  33. http://rcyshared.blogspot.com/

    gan Tuh Link gw.. :D
    Kok Scroll Bar nya gx ada ya??
    jadi nya Hilang

    BalasHapus
  34. Bagus sob tutorialnya dan saya sudah coba di blog saya :D
    http://acep-computer-science.blogspot.com

    BalasHapus
  35. saya sudah coba... tapi di akhir2 kok saya nggak ada code <body> nya? -- minta bantuan... :(

    BalasHapus
  36. Makasih masbrow.. :D
    kunjungi enbeseven.blogspot.com

    BalasHapus
  37. kalau membuat loading page cms joomla gimana ya untuk halaman home saja mohon pencerahannya

    BalasHapus
  38. Salam kenal bro. Artikel nya keren . Mo tanya dulu sblm praktek..Jadi berat gk loadingnya? Tx

    BalasHapus
  39. pusing juga men
    mampir ya http://z-cybertycku.blogspot.com/

    BalasHapus
  40. bro ane minta url gambar yang demonya bro soalnye ga bisa di kopi urlnya jadi susah masangnya bro terimakasi sebelumya bro atas triknya

    BalasHapus
  41. mampir jugah yah di http://andirifki25.blogspot.com/

    BalasHapus
  42. gan, kode theme blog yg ada gambar ganja / shaun the sheep punya gak? =p* yg lain juga gapapa.... minta ya gan B)

    kutunggu kunbalnya http://tgardpwnsyh.heck.in/

    BalasHapus
  43. :-bd mantap gan infonya..
    http://cilukkba.blogspot.com/search/label/teknologi

    BalasHapus
  44. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  45. thanks gan tutorialnya, sangat membantu. coba lihat hasilnya : http://demo-undanganonline.blogspot.com/

    BalasHapus
  46. thanks, nice tutor :-bd
    saya request kode seperti www.ballxcode.com donk :D

    kuunbalnya, www.ri-cyber.blogspot.com ^_^

    BalasHapus
  47. kalau memperbesar ukuran gambar saat loading g'mana y'
    mhon bantuanya.

    BalasHapus
  48. tnkz gan,, salam knal ya http://tersenymuntuku.blogspot.com

    BalasHapus
  49. Sipp Thanks Broo. Udah Bisa
    Kunjungi Blog Ane Yah http://cyber-xeroz.blogspot.com/

    BalasHapus
  50. terima kasih tutorialnya mas

    BalasHapus
  51. Jual Obat Aborsi Batam

    Jual Obat Aborsi Jakarta

    Jual Obat Aborsi Balikpapan

    Jual Obat Aborsi Kupang

    Jual Obat Aborsi Medan

    Jual Obat Aborsi Malang

    Jual Obat Aborsi Bali

    Jual Obat Aborsi Bandung

    Jual Obat Aborsi Makasar

    Jual Obat Aborsi Semarang

    BalasHapus
  52. Terima kasih untuk informasinya.
    Jika berkenan silakan mampir ke website kami
    Jasa Pembuatan Server Pulsa Untuk Pemula, kami bantu mendirikan server pulsa & PPOB dari nol hingga menjadi usaha berskala Nasional, klik di Software Pulsa PPOB

    Kami juga menerima pendaftaran MASTER DEALER, AGEN PULSA all operator + token PLN, silakan kunjungi website resmi kami di Pulsa Murah

    Jasa Pembuatan Server Pulsa ==> Software Pulsa Elektrik

    Software Pulsa
    Roket Pulsa
    Stok H2H Murah
    Stok Pulsa
    Pulsa PPOB
    Master Dealer
    Software Pulsa IRS
    Software PPOB
    C2 Metro
    Software Otomax
    Flash Machine
    Artikel Server Pulsa
    Pulsa Elektrik
    Pulsa Elektrik Murah

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>

 

Like On FB

Most Reading