Cara mudah menampilkan efek loading di blog - bagi sebagian jenis blog misalnya blog toko online, blog wallpaper atau yang lainnya, efek loading pada blog dapat memberikan kesan yang menarik  bagi orang yang membukanya.

loading icon 
 Akan tetapi perlu anda ketahui bahwa sebagian efek loading ada juga yang sifatnya malah memberatkan loading halaman blog.

Tak perlu kuatir..!!
    Karena disini Blog Penting akan mengulas cara membuat efek  loading yang tentunya tidak akan memberatkan Loading Blog anda
Berikut Langkah-Langkahnya

1.Silahkan letakkan kode berikut ini diatas kode </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>

2.Selanjutnya masukkan kode berikut ini ke  ]]></b:skin>

  
page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background: #000 url("URL IMAGE") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}

3.Dan berikut ini beberapa animasi loading yang bisa anda pilih, Kemudian pastekan url nya pada URL IMAGE pada kode diatas

loading icon gif

 https://4.bp.blogspot.com/-7FD-JrZ2GwY/VzR3USiU3qI/AAAAAAAABHA/QOWXsVD-_-Awb8UUcsgKPrefKb6ujduRACLcB/s1600/Loading2.GIF 
 
loading icon gif
https://3.bp.blogspot.com/-ci-R3V93XMU/VzR3SfrvKVI/AAAAAAAABHw/phio9Ksx3XUlcLyM08D3ybWLNnaeTy0iwCKgB/s1600/InternetSlowdown_Day.gif 

 
loading icon gif
https://1.bp.blogspot.com/-yN2jdcig-3s/VzR3SosICCI/AAAAAAAABHw/5OLroSbSzf4OChvYLtWM_FASWmkdK82gACKgB/s1600/Loading1.GIF 



loading icon gif
  https://1.bp.blogspot.com/-Nd_jokmDtcw/VzR3ZXVGGEI/AAAAAAAABH0/CdzEsJJlbKAdn_amyOA4q0wOVLL4wTGjwCKgB/s1600/loading7%2B%25281%2529.gif 



loading icon gif

https://1.bp.blogspot.com/-PbxLnf7-mlc/VzR3VQwaKMI/AAAAAAAABH0/US59J1u4BFkqoz78B4EP1IanyKjf4VLTwCKgB/s1600/Loading4.GIF   


loading icon gif

https://3.bp.blogspot.com/-jWXlSXxou8k/VzR3ZZafoSI/AAAAAAAABH0/KKPM5-gue7sabA7-O2AklPlurMDtt7DwACKgB/s1600/loading3%2B%25281%2529.gif  



loading icon gif
 
 https://2.bp.blogspot.com/-9Lr06M2DgpA/VzR3YAQmHTI/AAAAAAAABH0/-BlxdHJdKrwbjsL2l_rbbPUt9tBlLc06gCKgB/s1600/Loading8.GIF 

 

loading icon gif
 https://3.bp.blogspot.com/-f71URg2cj2c/VzR3ZisqUlI/AAAAAAAABH0/ZkSw4mgARDoWnpXTMTJDMIRhzJHcSNkowCKgB/s1600/loading9%2B%25281%2529.gif 



loading icon gif

https://4.bp.blogspot.com/-bysBmW2Ze54/VzR3U3wChYI/AAAAAAAABH0/7yQSyPwr13EuaY-bH8TWZzd-0Qf2y6FEACKgB/s1600/Loading3.GIF  



loading icon gif

https://2.bp.blogspot.com/-HU3qFwQSUaw/VzR3WQtVYtI/AAAAAAAABH0/H7KTuG-ZE9EKsk9csBIrAyMJk1X1bodlwCKgB/s1600/Loading6.GIF  



loading icon gif
https://4.bp.blogspot.com/-HMZgi_8wsnQ/VzR3V6YlyNI/AAAAAAAABH0/v9vG-jNVCl0MwsrMZIXSUCEab8AVgzpRACKgB/s1600/Loading5.GIF  

  
4.Selesai, Selanjutnya simpan template anda

    Demikianlah artikel Cara Mudah Menampilkan Efek Loading di Blog semoga bermanfaat, dan
Jangan lupa untuk berkunjung kembali  ke "Blog Penting" untuk mendapatkan informasi-informasi Penting dan Menarik

13 Komentar anda akan masuk moderasi!:

  1. keren nih aku juga pake loading blog

    ReplyDelete
  2. efek loadingnya keren-keren, gan

    ReplyDelete
  3. wah keren nih efek-efeknya.,., btw kalo pake itu ngefek sama kecepatan loading ga gan?

    ReplyDelete
    Replies
    1. efek nya hanya sedikit, bisa dikategorikan tidak ada

      Delete
  4. buset.... keren keren tuh loading blognya..... trims gan

    ReplyDelete
  5. Wah Keren Nih efek"nya , Ijin coba bro

    ReplyDelete
  6. wuie,.. keren test lah,.. nanti jadi berat g ya,...

    ReplyDelete
  7. wiiiih mantap ni. mau cobain ah
    ijin kopas script nya kang.

    ReplyDelete
  8. Waah,,, bisa dicoba nih. . .
    tpi apa gk berat gan ?

    ReplyDelete
  9. wih keren - keren banget yah. ane izin pasang satu di blog ane yah gan hehehe

    ReplyDelete

Komentar anda akan ditinjau terlebih dahulu oleh kami sebelum di publikasikan

 
Top