Efek loading blog dengan gambar animasi gif sesuai kinginan

HaiSob apa kabar? semoga semua dalam keadaan baik, Pada kesempatan ini haisob.com akan membagikan tutorial cara membuat dan menambahkan efek loading page sederhana di blog.

Efek loading ini akan muncul setiap kali pengunjung berpindah halaman di blog kamu. Maksudnya disini Efek loading blog dengan gambar animasi gif sesuai kinginan adalah jika kamu ingin mengganti tampilan loading tinggal mengganti gambar animasi gif nya saja sesuai keinginanmu.

Efek loading blog


Membuat Efek loading blog
Membuat efek loading blog 


Sebelumnya juga mengenai efek loading blog sudah pernah dibagikan cara membuat efek loading blog lingkaran dengan css keyframe dan efek weather loading animation yang tidak kalah kerennya.

Cara Membuat Efek Loading Blog di Blogger


1. Di Blog Bloger 😂
2. Pilih menu Template ➔ Edit HTML
Cara Membuat Efek Loading Blog di Blogger
Template - Edit HTML

3. Tambahkan jQuery pada blog sobat. Simpan kode di bawah ini sebelum </head> dan Apabila template sobat sudah memiliki jQuery seperti dibawah ini, lewati saja langkah ini.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> 
4. Letakan kode dibawah ini di atas  ]]></b:skin> atau diatas </style>
#page-loader { position:fixed !important; position:absolute; top:0; right:0; bottom:0; left:0; z-index:9999; background:#000 url('http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif') no-repeat 50% 50%; color:white; padding:1em 1.2em; display:none; }
5. Tambahkan kode dibawah ini ini di atas </body>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
6. Save.

Gambar-Gambar Animasi Loading 


Kode berwarna biru diatas adalah gambar animasi yang akan ditampilkan waktu loading.  Sobat dapat menggantinnya dengan gambar sobat animasi milik sobat atau pilih beberapa gambar animasi efek loading blog dibawah ini.

Efek Loading 1
http://4.bp.blogspot.com/-TPG2f3oEJWc/UQaijnks84I/AAAAAAAAFOA/KwXSCwh7Cxs/s1600/loading1.gif
Efek Loading 2
http://4.bp.blogspot.com/-FASuc5X70e8/UQaijioU_8I/AAAAAAAAFOE/UM9HTErEowA/s1600/loading2.gif
Efek Loading 3
http://2.bp.blogspot.com/-2LpTZKLCHZU/UQaikSj-wuI/AAAAAAAAFOY/vXpl8uZ7mGc/s1600/loading3.gif
Efek Loading 4
http://3.bp.blogspot.com/-99_s0XfLTt0/UQaikh3bSMI/AAAAAAAAFOU/BuKqG0mh0eY/s1600/loading4.gif
Efek Loading 5
http://1.bp.blogspot.com/-W9bm3Oc6WzA/UQaik9ql4AI/AAAAAAAAFOg/3fyDf9Agbso/s1600/loading5.gif
Efek Loading 6
http://1.bp.blogspot.com/-udgAVO3FySQ/UQailMH35aI/AAAAAAAAFOo/JD6vDePg9OU/s1600/loading6.gif
Efek Loading 7
http://2.bp.blogspot.com/-Va-9DPoGnio/UQailTDIWUI/AAAAAAAAFOw/iWgEqVu0zFg/s1600/loading7.gif
Efek Loading 8
http://2.bp.blogspot.com/-yz54Aj8Fp1s/UQailmVa8BI/AAAAAAAAFPA/LT0KOGY-_lk/s1600/loading8.gif
Efek Loading 9
http://3.bp.blogspot.com/-eeiu8xL2Qls/UQaimEebl4I/AAAAAAAAFO8/hSK_kq7C8Po/s1600/loading9.gif
Efek Loading 10
http://3.bp.blogspot.com/-bWMOJ7ywzjg/UQaij1cSLiI/AAAAAAAAFOM/Nrdgh1W6hys/s1600/loading10.gif
Nah sekian tutorial kali ini semoga bermanfaat dan semoga efek loading blog ini dapat mempercantik tampilan blog kamu 😜 .
Join This Site