Cara membuat efek Loading di Blog.
Ok sobat tutorial seocips kali ini tentang Cara Membuat Efek Animasi Page Loading keren di Blog Blogger. Mungkinsobat mempunyai alasan tersendiri untuk Membuat Efek Loading Pada Blog, misalnya adalah untuk mempercantik tampilan Blog, atau membuat terkesan pengunjung Blog anda karena lebih terlihat keren.Berbicara soal emenghias blog saya sudah banyak membahas tentang menghias blog. Beberapa Blogger tidak memasang efek loading seperti ini karena walaupun loading blog kita ringan tapi akan memiliki kesan yang berat di mata pengunjung, tapi tidak apa untuk anda yang ingin tampil "cantik", hehehe. Ok sobat berikut ini adalah cara memasang efek loading ke template Blogger anda.
Langkah 1 : 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 pertama ini. karena tidak boleh ada script jQuery lebih dari satu.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> Langkah 2 : Tambahkan CSS. Simpan CSS ini di atas ]]></b:skin>
#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzGM8kXUhmNbHM1hrIFmXNqP5VLbq5dbaGjBmPfDWRlftSUp4GbqfENQyNeErDhHsilkcmO9xJFvmGRRqKhsXPDk-K5DONT4P9BDqdaxzDVn5zto7N786IT29qJpUfW4V0dnwsgxG_naQ/s200/load6.gif') no-repeat 50% 50%;
color:white;
padding:1em 1.2em;
display:none;
} Langkah 3 : Tambahkan JavaScript. Tambahkan kode JavaScript 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> Kode berwarna biru diatas adalah gambar animasi yang akan ditampilkan waktu loading, sobat dapat menggantinnya dengan gambar sobat atau pilih beberapa gambar animasi efek loading blog dibawah ini.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy7b5cuynp1F21ojDJd-udAlhhmWgA9uLuwN4nkIayN5abXHDiB59nEHyyBTi0TF91UqjuTwyxyj8iV1dRfLRhVQK8YbNrhqT4XBM5_YQ67G4Ei3qa6y_q6LS7Gu6PHgKMKr5n2ry3dAD-/s1600/loading1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTkzoThqMj6KOZYsK76kUJSFxSvXE2iVQH39NOzAX9kUGHup5hP5ItOlMUmLhF9Uwxw5lKbBOWiccUjhFd4Rt0kXLjLCusByI3w378K6dsB09sod_TNITgw2kXEOBtcP4Bi13pQ3ZXBupl/s1600/loading2.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9kBvmVtXOEswLo-AcRgJ2lkitmyhDgQlb4Ww4y3uxbPP6QVp5_JsU61PtGNWnCq4falPob71ONGM_aYh-1YodaeFjoIzsz3zfW-veR8ClLF7J8UuUmP2TFRazQzitbiMgz24Xsc5JkUe_/s1600/loading3.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijacHroyWWV_TihOdZScq4hTjp2DxNl5MB6xIjp7j_NnZJICfBrjjlAPGcqtQC_U7nZw6dVNhf3J2ciRlkIkJbeI0G7PUWxVcnFkUZj55q8_kI6W3U_1cVfsXOfRiFuXU_vEOL2HcXbpI1/s1600/loading4.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGy1FL7iAQltkovSIcFCxfiR45h_sjPH3eFGPcOzI1FPVcuRN1iu9kV-QKtV5C6ok40j5NLu2CztyrEhUv_TQpb7ftBvDA30JV_XYkQLOojGnA8qGDdpS41Vh1pSBiYhtFcwpsZeQho22R/s1600/loading5.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDWsFIROix91tDErPeJ_msB36xx-yjgZJtDSq44bvQN7aYVHx9os_6eei5_LOHFJtRDYCbiaS_Qf7Er95ahxZBP4hdgFcpNFvP_61RPqXzM5bszB2DoxI5jzPbLNjnqfX7GF-VK2uLUi0U/s1600/loading6.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzj50tzY2lGgXbwEQRHeGmV1sNojBtSIzvwIf5fe_A6_nmNNujoFBc6Cy7Thz-rE9Qh994t808p1m8YaYDUjUbp6aIMm6XvUEgy0TVEDBhLdM7BH-XQlVDoPHEs4KzkTzTDsKtZfCYA2Ul/s1600/loading7.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43Z9AJotYSVpzFj2tochh54une_idmw8Pn9MlqpuYb42UuRPDRsYrv5WJWg1LtMaGv_7QEL78yx8tNtzyL7ohdO5Tac0W_wouQZs_1EJPmtCsl5MiQ3E4amex4V75ZgtO00Xqe2nERRwT/s1600/loading8.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLEAWm47p72zsCZb7vLjcqJC4SHu37VAZg4t8RwJpluxwQAF2-naPt3uzCliOf0NkHYpa92nUCpeKC6ElFsDPaxWok6-DI9RzMHn7jOHz1vpTDnScgqv-7fG5HlmaDM5swoAH9C0kXbYBk/s1600/loading9.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhek4GpdSrwDCNWLao78zZr4uTKf60IgkUocIMUl7gjkd7hT8DAT8UINFeG3Ckl_ZYroDdjSA-N_V5qSry4EeQhHrM1F2wG19Bq0YK7qUrhSU8eBC6MBQynKL7BFdb2p7xANxOEOGo1VlHQ/s1600/loading10.gif
Nah sekian tutorial arofi untuk saat ini semoga bermanfaat dan semoga efek loading blog ini dapat mempercantik tampilan blog sobat
