Cara Mudah Menampilkan Efek Loading di Blog

Cara mudah menampilkan efek loading di blog -Hai guys, lama tak berjumpa heheheh,kali ini saya membahas tetang trik ngeblog, ya cara 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.

 

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

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQyjea8kwq9Bd7XX9F6VoYvgeU7PMYHtNs7VydAnLOld6oRxEUh3FstrqZi1fTLJ3m1D1nHEhyphenhyphenq-GqHZcQnULO4R3Ia4yAQLicQXpBp6zoWZHoMAgMf13r96eNNx98FXhraAmZ0b2tkyrs/s1600/Loading2.GIF 

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO5DP6z78KxsYqGa1JT3ou_NHKPHuZvU20KgVNza5lDeoJSPV-TcwJAlxq1gGLJg7Q0grxgsMEXT3J9QBJiPPm9XycNoIq4DCY993CLLt63T9B6fRNR7xOfx3bVVWGqHYY1sPBCqD0OpVs/s1600/InternetSlowdown_Day.gif 

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBq9LsN2h1nqPmJMZgf_r6_iz9wCkBOA_4ps-DYRKJm9w128bqiszFOj7xUezXEEuq-krPnFnXpdeRYP98NCo58YZGKafAjINOsM59GCVgY14A8Pp_RpdK6rhFdVnV-_wrl2PwPWzub9ys/s1600/Loading1.GIF 

  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnw_XxbtkaCVsCRXqY9og-lFceVnDig5imuX8c3shH8UO49O08TLZsLu2fYl0LtEBc0t0LfnKFoVkRJpkYVM9fxJaRGQNiLv84K7xlCKledizVHujZDLvsZsUyaIr8_6Z7gSV_1pb29F6I/s1600/loading7+%25281%2529.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8OfBnw7DzRH3ODIegfcuB5CZRS3bC8heMIop2oMnWKzZiZfWQqCyfkn17l-CccY-8gNJlCkIbeYK2YqSUgkuQl-ojyiWbCIA8R2pU_MTCMBDYw9fMPL3WC2wmo3s_2UIwNsJYaZK_sblP/s1600/Loading4.GIF   

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwsfNd2P3uX35IFQ7ev-OlTgag7stCcmRL9s1xFaeTBtai3XfVg5eXaLVvkcJ7GX_0IVNNzGsQkxO9VjEhjcLfPrv-AmkWQPeIs-lZcWm9Bi6M01ALrnNHUYIX424vTdxeYmDmQtQEzxHK/s1600/loading3+%25281%2529.gif  

 

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbxjSLgnUzrcMc-CdTXSG0vAhhwjuSCwYoNzXCaor9HzwJtq5hQiCUYhZFLVKWc2q-4xlMuHewOOIm-7tHqwdw5ofDS-XUALU_nETEKKX6g2fgcb3AtpoUx9xDej8MZJMPYmP_7171z34e/s1600/Loading8.GIF 

 

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ILeU75PrV7ljgxoA5LHGLhvJ-6QEUFRR0ajm9zeWlK0W396y80WYvcOtth7DLfyrMXsPGArcsv8kpJSX0Hnl0oMZhngmlMlhG4YFv9zQbmUFO3UEkdbac9zWM-p2F_Wp_lA3o2fzIvfx/s1600/loading9+%25281%2529.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKintbGxqxivkzQZxh4lAldgCTG1XbCCesL5WM3Y4-WNkIsbtLjRZSZ2TkpORZOAtkyTqu-pNllRRGIZQ1TH3u3SuAPg9z0w-Lox0Z0DimhOjcecDnLwWB-nxpxLYhlheDln6g2eeXSIBE/s1600/Loading3.GIF  

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl2TDPWvAeGryfYF-QHVvDRUL28V5G8haVgNwDnRkPERTwolXH-x8fvdDbu-yH3A3bR8wiCgRMuTawa6m7skB3lrgQYaCempne0N1Ofp93ZQe_ZyT3pQBru6Q-a5AlaTEimN2Zyi7kDHyJ/s1600/Loading6.GIF  

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpZCY7LLvDWTfgrVppXYGXldii-0Q1syr_HYfJjlucCbgKHBxGuNRv3u2MMNLZ1lUj8NmzDjXNPmkATMzEQ9Q5n_7KMnS-lfENTPMZenuEtIKEHn-KfWFBw3nR9HISOPvRpMO8Mk7fIgyM/s1600/Loading5.GIF  

  

4.Selesai, Selanjutnya simpan template anda

Demikianlah artikel Cara Mudah Menampilkan Efek Loading di Blog semoga bermanfaat.