jQuery Efek Fadein Dan FadeOut Page Load

Hallo sobat wahid emalution , pada malam hari ini saya akan membagikan tutorial efek fadein dan fadeout pada page load di blog.

efek ini dapat memanipulasi Loading blog pada Browser , jadi ketika akses ke halaman web atau Blogger tampilan website seperti akan ada efek muncul. Untuk itu, langsung saja kita ke cara-caranya.

Pertama 

login ke Blogger.com lalu ke Template lalu edit HTML.

Efek Fade In

Jika sobat ingin menggunakan efek fade in pada loading blog 

letakkan kode dibawah tepat diatas </body>

<script type='text/javascript'>
$(document).ready(function () {
 $('body').hide().fadeIn(5000).delay(500)
});
</script>

efek diatas sudah aktif , tetapi biasanya layout sudah tampil  akan tetapi efek baru terlihat,

Untuk mengatasinya sobat bisa menambahkan kode berikut,

 body {display:none;}

Efek fadein dan Fadeout

Selanjutnya efek ini tidak beda jauh , efek ini hanya ditambahkan efek pada saat keluar halaman.
untuk menerapkan nnya sobat hanya
Meletakan kode di bawah diatas </body> gunakan CTRL + F untuk mencari.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
 $("body").css("z-index", "-10");
 $("body").fadeIn(5000);
 $("a").click(function (event) {
  event.preventDefault();
  linkLocation = this.href;
  $("body").fadeOut(1000, redirectPage);
 });

 function redirectPage() {
  window.location = linkLocation;
 }
});
//]]>
</script>

Namun sebelum menerapkan tersebut , perlu dipastikan di template sobat sudah terpasang jQuery , bisa menggunakan versi yang di bawahnya atau yang diatasnya.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

Jika jQuery sebelumnya sudah ada di blog sobat , abaikan saja.

sekian dari saya , Semoga Bermanfaat.

Referensi Blog Mas Andes