Ini Efek Loading Blog yang pertama kali gw kenal, Cara bikinnya pun gampang

HaiSob apa kabar? semoga semua dalam keadaan baik, Pada kesempatan ini saya akan membagikan tutorial cara membuat dan menambahkan efek loading pada Blogger. Efek loading ini udah adalah loh dari zaman pertamakali saya ngeblog. Cara ngeditnyapun gampang, kalau kamu ingin mengganti tampilan loading tinggal mengganti gambar animasi gif nya saja. Ok bro cekidot..

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