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...

Previous
Next Post »

28 komentar

Klik Disini Untuk komentar
13 February 2016 at 15:06 ×

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

Tapi tetep keren deh

Reply
avatar
ali masruri
admin
13 February 2016 at 15:19 ×

mudah banget cuman nambah script
thanks infonya gan

Reply
avatar
Umar As Egar
admin
13 February 2016 at 15:21 ×

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

Reply
avatar
13 February 2016 at 15:44 ×

Mantab gan. ijin pasang di blog

Reply
avatar
13 February 2016 at 15:56 ×

thanks infonya gan , membantu buat newbie seperti sy haha

Reply
avatar
13 February 2016 at 16:02 ×

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

Reply
avatar
13 February 2016 at 16:03 ×

ini nih yang ane cari ijin cobain gan. thanks gan

Reply
avatar
Zeyn Mutaqin
admin
13 February 2016 at 16:08 ×

Mantap artikel diatas sangat bermanfaat sekali :)

Reply
avatar
13 February 2016 at 16:24 ×

keren tampilannya, bookmark dulu buat dipake ke blog baru

Reply
avatar
13 February 2016 at 16:30 ×

Makasih, ini nambah ilmu saya :)

Reply
avatar
febri aji
admin
13 February 2016 at 16:38 ×

Tampilannya kayak gimana gan ? gak ada demo :D

Reply
avatar
Vadaa bro
admin
13 February 2016 at 16:41 ×

efek loading ntar jadinya widget ya?

Reply
avatar
Ulin Nuha
admin
13 February 2016 at 16:42 ×

Bagus nih gan.

Bisa memengaruhi kecpatan loading blog nggak nih?

Reply
avatar
13 February 2016 at 17:09 ×

agak bingung ane gan, kadang kadang salah edit html

Reply
avatar
Catatanmerah
admin
13 February 2016 at 17:33 ×

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

Reply
avatar
Catatanmerah
admin
13 February 2016 at 17:33 ×

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

Reply
avatar
13 February 2016 at 19:39 ×

asal ga kelamaan loadingnya..hehehe

Reply
avatar
panji kurnia
admin
13 February 2016 at 19:40 ×

Kalo boleh tau, bikin blog lemot gak gan?

Reply
avatar
Ojik kidiw
admin
15 February 2016 at 08:13 ×

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

Reply
avatar
Gho Far
admin
15 February 2016 at 09:44 ×

sip... ane butuh ne

Reply
avatar
Info Ku
admin
15 February 2016 at 15:01 ×

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

Reply
avatar
Honk Firmino
admin
16 February 2016 at 06:50 ×

Nanti saya coba deh hehe

Reply
avatar
24 February 2016 at 18:58 ×

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

Reply
avatar
Gede Teguh
admin
26 February 2016 at 13:12 ×

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

Reply
avatar
28 February 2016 at 11:46 ×


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 .

Reply
avatar
JUN CIKAL
admin
18 April 2016 at 21:13 ×

mksih infonya. komen balik ya :D

Reply
avatar

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