Efek fadeIn Page Load Blog

Selamat malam sob, Malam ini kembali saya mau post tentang tutorial blog yaitu cara membuat Efek fadeIn Page Load Blog. postingan kali ini bertujuan untuk memanipulasi halaman dengan membuat efek fadeIn dan fadeOut agar setiap kali pengunjung masuk dan menjelajahi blog dengan link yang ada maka setiap kali browser memuat halaman akan menampilkan efek halaman yang memudar terlebih dahulu dan saat halaman terbuka sudah dalam tampilan yang rapi pastinya. tidak hanya itu sob saat halaman blog terbuka sudah dalam tampilan seutuhnya sesuai tata letak masing-masing elemen. Tapi perlu sobat ketahui, ini bukan berarti mempercepat loading blog akan tetapi hanya memanipulasi halaman pada saat proses loading sehingga saat browser memuat (membaca javascript yang tergolong lama) dan terkadang menyebabkan tampilan halaman sedikit acak-acakan maka supaya tidak terlihat dan saya juga menggunakan cara ini untuk menutupi kemungkinan tersebut. Mungkin apabila di antara kalian ada yang mengalami masalah seperti halnya dengan blog ini, bisa menggunakan cara ini sebagai alternatife untuk
Ook sob tanpa panjang lebar lagi mending langsung aja yuk sob

Efek fadeIn Page Load Blog

Script yang akan kita gunakan seperti dibawah ini,
cara memasangnya cukup mudah, tinggal masuk ke Edit HTML lalu taruh di atas kode </body>

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

Script diatas sudah bisa berjalan. Namun biasanya setelah layout blog sudah nampak terlihat akan tetapi efek baru akan mulai berjalan. Untuk menghilangkan terlebih dahulu, bisa menggunakan CSS /* Script Caritau */ #ContactForm1 h2,#PlusFollowers1 h2,.header h2,.showpageOf,.quickedit,nav a#panel{display:none} body{display:none;background:#f5f5f5;color:#222;font-family:'PT Sans',sans-serif;margin:0;padding:0} untuk menyembunyikan body sebelum script berjalan.

Efek fadeIn dan fadeOut Page Load Blog

Untuk yang ini adalah efek pada saat masuk dan keluar dari halaman. script inilah yang saya pasang pada blog saya, sobat bisa langsung melihat efeknya dengan cara mengklik link yang ada di blog ini. Cara kerja dari script di bawah adalah menyeleksi seluruh link yang ada pada halaman blog tersebut, sehingga apabila pada blog tersebut terdapat salah satu link untuk menampilkan lightbox atau modal dialog mungkin akan bentrok dan salah satu dari efek tersebut tidak berjalan. Untuk menerapkannya kedalam blog caranya sama seperti langkah di atas, dengan menaruhnya di atas kode </body>

<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>

DEMO 

Namun sebelum menerapkan cara di atas juga perlu dipastikan bahwa di template blog juga sudah terpasang jQuery, bisa menggunakan versi terbaru atau bisa juga versi dibawahnya.

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

Apabila sebelumnya sudah terdapat kode tersebut maka abaikan saja kode diatas karena tidak perlu memasangnya lagi. Ooke sob, saya cukupkan dulu ya postingan saya kali ini tentang Efek fadeIn Page Load Blog, semoga berguna dan bermanfaat buat kita semua,. Trimakasih