Membuat Efek Loading Di Blog

Selamat datang kembali di Joe Erick Blog. Pada postingan kali ini saya akan membahas tutorial tentang Membuat Efek Loading Di Blog. Efek loading pada blog digunakan untuk mempercantik dan membuat tampilan blog semakin bagus dan keren, agar visitor juga tertarik melihat tampilan blognya sobat.
Mungkin pada tutorial kali ini saya belum bisa untuk menampilkan demonya, silahkan sobat cek sendiri jika nantinya sudah siap diblog shobat.



1. Masuk ke Blogger kalian, Kemudian Pilih Edit HTML
2. Copy CSS berikut diatas kode ]]></bskin>
#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background: #303030 url("http://1.bp.blogspot.com/-iMqf55aXbK4/UnwP0isNyZI/AAAAAAAAB_M/lP8usQo-u_Q/s320/load+labeltutorial.gif") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}


Info :
1. Kode Background: #303030 = bisa anda ganti dengan warna yang anda sukai jika anda tidak paham akan kode warna HTML bisa cek menggunakan tools kode warna disini
2. Kode yang berwarna merah bisa anda isikan dengan URL gambar gif/animasi milik anda sendiri atau anda bisa gunakan gambar yang diatas nah jika anda tidak bisa membuat gif sendiri anda bisa menggunakan tools di website dibawah ini:

www.loadinfo.net
www.preloaders.net
www.ajaxload.info

nah kalo udah dapet gambar animasi atau gambar gif sendiri sekarang masuk ke langkah yang ketiga



3. Copy kode dibawah ini di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
// Menyisipkan markup tabir animasi
$(document.body).append('<div id="page-loader"></div>');
// Saat halaman aktif terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
    // ... tampilkan tabir animasi dengan efek `.fadeIn()`
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
4. Selanjutnya Save Template. Semoga sukses terpasang diblognya shobt...

Terima kasih sudah bersedia berkunjung dan menyimak tutorial singkat saya tentang  Membuat Efek Loading Di Blog, semoga bermanfaat...

Berlangganan update artikel terbaru via email:

29 Responses to "Membuat Efek Loading Di Blog"

  1. :v ane pernah masang efek loading diblog, hasilnya bagus cuman mengurangi kecepatan loading blognya :D

    Tapi tetep keren deh

    ReplyDelete
  2. mudah banget cuman nambah script
    thanks infonya gan

    ReplyDelete
  3. wah baru tw, boleh di coba nih. nice share gan

    ReplyDelete
  4. thanks infonya gan , membantu buat newbie seperti sy haha

    ReplyDelete
  5. Masih sedikit ragu untuk masang ginian sob. Takutnya malah memberatkan loading blognya

    ReplyDelete
  6. ini nih yang ane cari ijin cobain gan. thanks gan

    ReplyDelete
  7. Mantap artikel diatas sangat bermanfaat sekali :)

    ReplyDelete
  8. keren tampilannya, bookmark dulu buat dipake ke blog baru

    ReplyDelete
  9. Tampilannya kayak gimana gan ? gak ada demo :D

    ReplyDelete
  10. efek loading ntar jadinya widget ya?

    ReplyDelete
  11. Bagus nih gan.

    Bisa memengaruhi kecpatan loading blog nggak nih?

    ReplyDelete
  12. agak bingung ane gan, kadang kadang salah edit html

    ReplyDelete
  13. Sy masih newbie dan artikel ini sangat bermanfaat bagi saya. Ditunggu posting selanjutnya

    ReplyDelete
  14. Sy masih newbie dan artikel ini sangat bermanfaat bagi saya. Ditunggu posting selanjutnya

    ReplyDelete
  15. asal ga kelamaan loadingnya..hehehe

    ReplyDelete
  16. Kalo boleh tau, bikin blog lemot gak gan?

    ReplyDelete
  17. nice share
    http://www.zynation.com/

    ReplyDelete
  18. ohh gitu ya gan caranya :)
    tapi memberatkan blog gak gan?
    thanks infonya~

    ReplyDelete
  19. sebelum ane pasang, ane mau tanya dulu gan :D ini berat gak loadingnya? :)

    ReplyDelete
  20. Waww keren juga bisa bikin efek loading versi html ya? Tapi apa gak ngebertin blognya gan?

    ReplyDelete

  21. Hello Arlina memiliki masalah berikut di plantilla.No saya dapatkan blogger kotak komentar hanya muncul ketika log ini dengan akun google saya, saya telah melihat hal yang sama pada halaman Anda dan hal yang sama terjadi , saya berharap untuk punya jawaban untuk bantuan saya .

    ReplyDelete
  22. mksih infonya. komen balik ya :D

    ReplyDelete
  23. Boleh dicoba nih bg buat blog download saya. Makasih tutorialnya.

    https://ebookinaja.blogspot.com/

    ReplyDelete

PERATURAN BERKOMENTAR :
✔ Relevan
✔ Sopan
✖ Link Aktif
✖ Spam
✖ Diluar Topik / OOT !

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel