Membuat Efek Tampilan Loading Halaman Pada Blogspot

Viyan Pradita Kamis, Juni 07, 2012 ,

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.

Ditulis Oleh :

Artikel Membuat Efek Tampilan Loading Halaman Pada Blogspot ini dipublish pada hari: Kamis, Juni 07, 2012. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

97 komentar
Terjun Ke Kolom 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. sudah saya aplikasikan. hasilnya menarik perhatian. hehe terima kasih gan.

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

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

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

    BalasHapus
  27. 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
  28. 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
  29. ini yang saya cari2 dari tadi
    thax mas langsung praktek :D

    BalasHapus
  30. 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
  31. mo coba ah...makasih tips nya...

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

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

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

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

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

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

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

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

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

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

    BalasHapus
  41. 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
  42. :-bd mantap gan infonya..
    http://cilukkba.blogspot.com/search/label/teknologi

    BalasHapus
  43. Komentar ini telah dihapus oleh pengarang.

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

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

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

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

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

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

    BalasHapus
  49. terima kasih tutorialnya mas

    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>


web design blogs Bloggers - Meet Millions of Bloggers