DomaiNesia

Cara Membuat Efek Animasi Page Loading di Blog

Cara Membuat Efek Animasi Page Loading di Blog
Cara Membuat Efek Animasi Page Loading di Blog - Efek animasi pada blog ini merupakan suatu efek page loading yang terbaru namun sangat sederhana sekali, tetapi animasi page loading di blog ini sangat keren sekali dengan efek-efek animasi loading yang begitu menarik dan banyak pilihan efek loadingnya. Banyak sekali website yang menyediakan ajax loading page untuk blog, dan saya juga akan membagikan beberapa efekanimasi loading page yang saya ambil dari salah satu web penyedia ajax animasi page loading.

Untuk membuat efek animasi page loading di blog kita hanya menggunakan sebuah CSS dan jQuery agar bisa menjadi sebuah efek animasi page loading di blog. Dengan menggunakan efek animasi page loading ini tidak akan terlalu memberatkan Loading Blog Anda, sehingga Anda tidak perlu khawatir dengan penggunaan efek animasi page loading pada blog Anda.

Untuk itu blog Ficri Pebriyana akan membagikan sebuah tutorial membuat animasi loading pada blog terbaru 2014, dengan memberikan efek animasi loading maka akan terlihat begitu indah dan keren ketika Anda atau pengunjung blog sedang berada pada blog Anda lalu berpindah halaman maka efek animasi loading page ini akan terlihat. Baiklah langsung saja bagi Anda yang ingin membuat atau menambahkan efek animasi loading page di blog terbaru silahkan baca tutorialnya dibawah ini :

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]</b:skin> atau </style>
4. Copy kode css dibawah ini, lalu Paste diatas kode ]]</b:skin> atau </style>
/* Loading Page */
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcKVVhbSDzy8DReG8Th5P3wZoRzZQF5ON2uTDS2vev6lrU_9dawr1rGo655K6FX_rOJVLandNHUkiFdrobmPm8MkLJuId1_PBNWg069sJ-CuakYXQu07quRF_d5Was33RIkvxZgrZ6B5gj/s128-no/loading.GIF&#39;) no-repeat 50% 50%;padding:1em 1.2em;display:none}
5. Cari kode </body>
6. Copy kode jQuery dibawah ini, lalu Paste diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>
7. Klik Simpan Template

Catatan :
- Anda bisa mengganti efek animasi loading dengan mengunjungi website ini http://preloaders.net.
- Anda juga bisa mengganti efek animasi loading yang sudah saya siapkan dibawah.

Kumpulan Efek Animasi Loading Page .Gif

Inilah beberapa efek ajax animasi loading page yang saya ambil dari salah satu web penyedia ajax loading page, silahkan bisa Anda pilih dibawah ini :

Efek Animasi Loading Page 1
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9FlBMFXmISa3W6CyAuDi5enrMb10FkBYRkcmYJVLeXLvWvaMpn9NzGaqWf46Bv8NvLegaBb4pZXsvGpekllAdbCm3psPy_V_wVrtXe5b5LW_8d0FBZ5kp6TnfvqG2ahocCBtqDBHC-jg/s128-no/Loading1.GIF


Efek Animasi Loading Page 2
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiegnKIxGaxgzQ41H5zkVODn8k5AylX7FB84ZDTtwye0sJTxhvuF0vns9LW7nzpRpvAX2rVRkHxQOEEFbdvb-pKCYvPjn6pmBnRKnSGu4_rCknq3FZqFUl9FMViqJ1rBiofA3PGl2i5rqM/s128-no/Loading2.GIF

Efek Animasi Loading Page 3
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFtu00-rxGBzm34N_svu1p8VXKV_SwlbXr8Dk3GoMRZ-A9bR3V-vjMn9b-gUj-LkdS56p-f5TN8Ql1UtpDE_MkfKqhc9RzmJzxVhkDKeHk97f7AtOuj7Q9nfyNxfn7FXa7kzeF6XMF-1c/s128-no/Loading3.GIF

Efek Animasi Loading Page 4
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgufLcbi8M9PZLBXKTC9K5n4xF94K6tZQ37t_Ox71kLdrn1Jx1avt9ekljrix_9r9NdiSrUxhinvqZwpPos7xyqVuqATv0ZPFz7nNHs9V_xfvWLx3eyakUN8k8pocKPotYAahx6-2l0Dgc/s128-no/Loading4.GIF

Efek Animasi Loading Page 5
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8omVOpsotXimJFGQySus9iC3TCWJtMEj2NmTAJzDp3esmVEynT452BdIXeR4Zy78nrFgCqzgIbjpkr6Vrm786AQW7CAJK4n4-XoKA4-PfeRvcZiKNKr23x8_LRwapO6AiMF7OM8Ifkus/w124-h128-no/Loading5.GIF

Efek Animasi Loading Page 6
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEKImGpi6L3DYWsJcO54hICdv0B4bykXtLv6exZ9W4HAoljBEcesabkdzAhcbweVNWi8pP6F2JI8A-I0WkMUQOD6sEoEwcuM1s8_RpyAI78Apnq8UO7LJO_mE7SCk_WPVaCp5DZ_zdjKI/s128-no/Loading6.GIF

Efek Animasi Loading Page 7
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh38hnS1iKw_JtEAGVUX3HuMWIuO4Yj_-zses5fvh_tMCtLkPydOfU40kh-MbDUSASA0BuWlkd3bNMuHPx1X-zOJpfTMAnhLnuFM_doJFVaXUsL2zCsNx0rSDh_9aqLcEZukIAl0coa8lI/s128-no/Loading7.GIF

Efek Animasi Loading Page 8
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0nNgezzonrGAaBDI8-0ymn7XZKctJuHeAUauYIJBSPzbjldMyJVbqQ1h3zxcRxgedxCq2W9cMo2zsuJam4TLsLGXC9PO4m9Elo8L9IkEc3v8qwcrx0X9w3q5aWUnGBWZClvJw9L0cnCk/w128-h54-no/Loading8.GIF

Efek Animasi Loading Page 9
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfJR8I0RHgBNpsKyfS72bo5zQM_btOffGHX87NuUmNVo6Y2Uc6LrDLhvdrGTdFydi-aiBM-6d0Cnw0nk7H99SIwmm5kXu0OCO6GX27XPnbKp2voPuHqh8p85vLkMGQcuAKnTz2VqDkDLI/s128-no/Loading9.GIF

Efek Animasi Loading Page 10
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Njgi1x8lYnmP9bfa-1a3bLvW99SP0ODJA-rxCk0ovWy0WFgnK6cpwgiDd59-PFzf5m3YBK5hEZWYV8xKFWGcgIRR7pbudFw-USNAItBuxUSpwMWgeueb3_hgZX_JyvOqLTxweS0ur48/w128-h40-no/Loading10.GIF

Sekian artikel mengenai Cara Membuat Efek Animasi Page Loading di Blog. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

77 Komentar untuk "Cara Membuat Efek Animasi Page Loading di Blog"

  1. Mantabb mas.. ijin praktek.. :-d

    BalasHapus
  2. keren sekali, saya coba dulu ya mas febri semoga berhasil

    BalasHapus
  3. Keren Mas, Berat nggak gambarnya mas

    BalasHapus
    Balasan
    1. ngga terlalu sob, kalau mau lebih kecil lagi silahkan kunjungi web penyedia ajax loading yang ada di atas, tinggal ganti ukurang pixelnya saja...

      Hapus
  4. beuh bikin loading blog tambah keren dan gak bikin jengkel lantaran nunggu loading ni

    BalasHapus
    Balasan
    1. iya sob, bisa dengan menggunakan efek animasi pada loading :D

      Hapus
  5. keren keren euy efek loadingnya,, jadi blog keliatan lebih beda dari yang lain, mantap bro,,heheh :) izin save,

    BalasHapus
  6. Wah keren-keren mas efek loadingnya. Apakah ga mengurangi kecepatan loading blog mas..??

    BalasHapus
    Balasan
    1. saya rasa sih tidak akan berpengaruh besar terhadap loading blog...

      Hapus
  7. gan knp kgk work di blog saya? pdahal dah ikutin tutorial diatas?

    BalasHapus
    Balasan
    1. coba deh ulangi lagi sob,
      cara di atas work cuman di bagian artikel doang, kalau di homepage gak bakal work..

      Hapus
    2. brarti harus pake read more dulu dong ? baru bisa ?

      Hapus
    3. kagak usah, maksudnya begini.. efek loading diatas berlaku di halaman posting seperti ini,
      tetapi jika di homepage tidak ada efek loadingnya

      Hapus
    4. Komentar ini telah dihapus oleh pengarang.

      Hapus
  8. wkkkkkkkkkkkkk di blogku gagal nih bro...
    kurang teliti kyknya gw ,,,

    BalasHapus
    Balasan
    1. coba tambahkan kode ini diatas kode </body>
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>

      Hapus
    2. makasih sob , udh jadi nih :-bd

      Hapus
  9. coba tambahkan kode ini diatas kode </body>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>

    BalasHapus
  10. terima kasih tutorialnya dan coba saya praktekan
    jangan lupa kunbalnya arifinbp.blogspot.com

    BalasHapus
  11. waoohh basus ,,, bngt,,,,, bsa dicobaiing

    BalasHapus
  12. Waah bagus juga. Mungkin bisa saya terapkan diblogku.

    BalasHapus
  13. bagus bgt blognya, template buat sendiri to gimana? klo buat sendiri, bagi donk templatenya. ijin pake juga ya loadingnya |o|
    http://clickandskip.blogspot.com

    BalasHapus
  14. wah mantap nie, ijin use the loading y. :)
    visit dunk :
    http://duniaku-belajar.blogspot.com/

    BalasHapus
  15. https://lh5.googleusercontent.com/-H8yWVVQ78Wk/U7nQVZTbQqI/AAAAAAAAEDU/a-aWtzRZlls/s128-no/Loading9.GIF

    BalasHapus
  16. CARI KODENYA KOK RUET BANGET YAH...DI ENTER JUGA GAK KETEMU KODENYA

    BalasHapus
  17. loadingnya keren" mas tapi di blog saya kok nggak bisa ya ?
    tlong pencerahannya :)

    BalasHapus
  18. mantap gan, kalo buat efek loadnya di bagian atas gimana y gan?

    BalasHapus
  19. Gan diblogku efek loadingnya gak ada gambar loadingnya gan @@,

    BalasHapus
  20. Balasan
    1. ilangin &#39 titik komanya juga awal dan akhir, pasti berhasil , liat aja hasilnya di blog ane

      Hapus
  21. ('https://lh4.googleusercontent.com/-lvlkiOAd4UA/U6qOQ4uFtUI/AAAAAAAAD58/wqTdiNc3M0g/s128-no/loading.GIF')

    hilangi aja &#39 yang awal sama yang akhirnya

    BalasHapus
  22. gan kalau ane pasang kode no 6 di halaman tertentu bisa enggak ?

    BalasHapus
    Balasan
    1. di coba aja sob, tapi saya yakin gak bisa :D

      Hapus
    2. Klw pakai tag kondisional bisa gk y mas?

      Hapus
  23. mas ini ada demonya apa gk??

    BalasHapus
  24. mantaf mas animasi loadingnya |o| tapi kok di blog aku gak bisa mas? apa emang hanya buat blog yg loadingnya lama?

    BalasHapus
    Balasan
    1. coba pasang kode jquery nya , di atas kode /body
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>

      Hapus
  25. Mass Pusing cari b:skin atau style dan body ??Salah penempatanya !!!
    mohon Solusinya !!!

    BalasHapus
    Balasan
    1. pakai ctrl + f lalu tulis b:skin tanpa tanda [ atau ]
      atau tempatkan kodenya di bagian CSS

      Hapus
    2. bro cara generate preloader nya yang transparan gimana infonya dong
      maklum nubi :)

      Hapus
  26. bray ficri, punya bbm? atao apa biar enak buat kontak, mau naya banyak nih :D

    BalasHapus
  27. apaan nih artikel nya huh capek capek bikin blog dulu like nya dikit sekarang semenjak ada blog ini saya yg punya blog ikut menerima kemajuan atas blog ini terimasih

    BalasHapus
  28. yang masih pada gk bisa di url nya ada sesikit kesalahan

    tambahkan tanda ('isi dengan link')
    tanpa tanda kutip

    BalasHapus
  29. http://1.bp.blogspot.com/-WSwp-XQx56I/UimNMHeA_pI/AAAAAAAABRs/toCr6b8Rf2A/s1600/belau+medimeta.png

    BalasHapus
  30. Loading yang cocok untuk web saya apa gan? saya ingin yang transparan

    BalasHapus
    Balasan
    1. yang diatas juga bisa sob, ganti kode background:#fff dengan kode #transparent atau kode warna RGB

      Hapus
  31. Izin copas ya gann, keren sih :D

    BalasHapus
  32. cara memasang itu gimana gan tolong dikasih tahu

    BalasHapus
  33. Komentar ini telah dihapus oleh pengarang.

    BalasHapus

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Fast Hosting