Cara Membuat Efek Loading Page di Blog

Assalamu'alaikum Wr. Wb

    Pada kesempatan kali ini SIA27, kembali membagi tutorial bagi kalian yang sedang membangun blog kalian

Dengan menggunakan Loading Page, tentunya blog kalian akan terlihat waw, wah, berbeda serta profesioanal :v 

Ini Loading Page Ala Blog SIA27 :v 

Bagaimana apa kalian tertarik untuk membuat LoadingPage juga??
Jika iya , yuk kita mulai tutorialnya



Step By Step:

1.  Masuk Blogger kalian
2. Masuk Dashboard -> Template -> klik "Edit Templat" 
3. Cari kode </body> ( Bisa dengan menekan Ctrl+F
4. Masukan code berikut 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(8000).fadeOut(1000);
});
//]]>
</script>

Contoh Penerapan Code

    5. Selanjutnya kita cari kode ]]></b:skin>
    6. Lalu masukan code berikut ini di atas ]]></b:skin>

#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background:rgba(0,0,0,0.0) url("https://3.bp.blogspot.com/-LeAofRN9Ke4/V9aMeHoVFoI/AAAAAAAAAxs/QR7M08vy0gktgsQr2kXAA1UMNDjAwgCYACLcB/s1600/final%2Bloading%2Bpage%2Bsia27v5.gif") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}

CATATAN:

Silahkan kalian ganti warna background sesuka kalian di Tulisan warna MERAH

Silahkan masukan url .gif kalian di Tulisan warna KUNING

Bagi kalian yang belum punya gif , kalian bisa ambil beberapa contoh gif dibawah ini

http://3.bp.blogspot.com/-KuPPWeIiKEk/VA16pu4vxVI/AAAAAAAADY4/DORC4PejW6k/s1600/loading1%2B(1).gif

http://1.bp.blogspot.com/-yw93SfO7HUg/VA16kPJrEMI/AAAAAAAADX0/zA_AYKGrLpk/s1600/Loading1.GIF

http://3.bp.blogspot.com/-7ijf80PfNiE/VA16qe_bMvI/AAAAAAAADZI/UOFV0ortsc8/s1600/loading2%2B(1).gif

http://4.bp.blogspot.com/-RNEaIW8mfwM/VA16kh4jw_I/AAAAAAAADYA/8BzQLvaNjXs/s1600/Loading2.GIF

http://4.bp.blogspot.com/-Swt685lt6ys/VA16rHry5eI/AAAAAAAADZY/IpcXMen9Baw/s1600/loading3%2B(1).gif

http://3.bp.blogspot.com/-eOUGOXRvaAw/VA16rbVNP0I/AAAAAAAADZQ/7vyE8vSu9oE/s1600/loading7%2B(1).gif

http://3.bp.blogspot.com/-RGDTwjwFAfI/VA16nTy73yI/AAAAAAAADYY/2Q_bv6PSZpk/s1600/Loading6.GIF

http://1.bp.blogspot.com/-GbiMJDnzg6Y/VA16nNujPAI/AAAAAAAADYU/-8FLWN8gGX0/s1600/Loading5.GIF

http://4.bp.blogspot.com/-oXnJb-Hf8yg/VA16mCcCwtI/AAAAAAAADYM/L-6mkDGWBd8/s1600/Loading4.GIF

http://1.bp.blogspot.com/-IiLv-ImK560/VA16kvSVJQI/AAAAAAAADX4/4iEBuCyqSQY/s1600/Loading3.GIF

http://2.bp.blogspot.com/-gPwCiVWVA0E/VA16sbLarKI/AAAAAAAADZg/53_r4Hiy0Bo/s1600/loading9%2B(1).gif

http://4.bp.blogspot.com/-39XJmVYPlVw/VA16p37GXCI/AAAAAAAADZA/josfLBxhobs/s1600/loading10.gif

http://2.bp.blogspot.com/-EPaWBo-HO5Y/VA16pR-LyzI/AAAAAAAADYw/9J60a2EkJlI/s1600/Loading9.GIF

• Terakhir klik "Simpan Template"

Baik mungkin sekian dari SIA27
Jika ada pertanyaan silahkan Berkomentar

Wassalamu'alaikum Wr. Wb

Artikel Terkait