Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

jQuery Efek fadeIn dan fadeOut Page Load Blog

jQuery Efek fadeIn dan fadeOut Page Load BlogjQuery Efek fadeIn dan fadeOut Page Load Blog – tulisan ini saya latar belakangi karena semula page load blog ini yang lumayan lambat karena banyaknya javascript yang saya gunakan sehingga pada saat loading membuka halaman tampilannya sedikit terganggu dan terlihat kurang rapi. Untuk mengatasi hal ini maka timbul inspirasi untuk menutupi kekurangan tersebut agar pada saat halaman blog terbuka sudah dalam tampilan seutuhnya sesuai tata letak masing-masing elemen. Namun perlu diketahui, 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 saya 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 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.

Efek fadeIn Page Load Blog

Efek ini yang saya gunakan pada blog ini, demonya bisa di lihat saat membuka salah satu halaman di blog ini. Walaupun sederhana namun lumayan untuk memanipulasi loading halaman blog. Script yang di gunakan seperti dibawah ini, cara memasangnya 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 body{display:none} untuk menyembunyikan body sebelum script berjalan.

Efek fadeIn dan fadeOut Page Load Blog

Untuk yang ini dengan sedikit tambahan efek pada saat keluar dari halaman (meninggalkan halaman). Pada saat berpindah halaman maka akan timbul efek fadeOut atau halaman akan memudar terlebih dahulu sebelum ke link halaman berikutnya. Cara kerja dari script di bawah adalah menyeleksi seluruh link yang ada pada halaman blog tersebut, sehingga mungkin 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>
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.

Berlangganan artikel via email

40 Response to "jQuery Efek fadeIn dan fadeOut Page Load Blog"

Kunjungan pertama mas Bro..ngehabisin kopi jd ga bisa tidur, btw keren tuh tampilannya mantabbbbb

Balas

makasih mas broo sudah berbagi sangat bermanfaat nih tips nya ..

Balas

Selamat Pagi Mas Andes, Mas Bro nya di borong Mas Virlyz sama Mbak Friska =D
Mantap nih Mas Load blog bisa di manupulasi dengan trik ini langsung di coba. terima kasih

Balas

waduh.. efeknya buat pusing mas, mungkin karena keseringan lihat koding2 ya heheheh... :)

Balas

kalo masuk halaman ada yang kaya gitu biasanya pengunjung terpana heuheu :D

Balas

wah sepertinya blog saya juga harus dipercepat nih

Balas
avatar
Anonymous

blognya keren banget mas. ^_^

Balas
This comment has been removed by the author.

bagaimana cara pembuatan tombol DEMO + font awesome dngan style kayak di atas

Balas

yang punya rumah lagi kondangan tuh Kang

Balas

mantep mas andes :)

Balas

lama tak mampir maenan nya jeQu mulu nih mantapzzzz !!!

Balas

keren euy mas Andes,BTW ini berlaku untuk semua teplate apa hanya untuk template tertentu saja gitu......demikian mas Andes hehe

Balas

manteup mas.
btw, udah lama ga mampir k sini, sekarang tampilan blognya udah metro nih, ajiib dah. :D

Balas

keren efeknya mas

Balas

makin uye aja mas andes :D

Balas

wah menarik sekali yah mas kalau menggunakan efek fadein dan fadeout seperti yang dijelaskan di atas, sip mas Andes, udah lama nih saya nggak mampir ke sini hehe...

Balas

izin percobaan gan

Balas

Kaya nya yang punya rumahnya
lagi berkunjung ke dunia nyata kali Mas =D

Balas

lama ga mampir ato mampirnyalama mas eka heheheh :)

Balas

mas, ijin belajar d blog ini ya :)
skalian ijin follow jg

Balas

Jadi tambah keren kalau bukak halaman lain ya mas .. :)

Balas

nanti di coba mas andes BMdulu :D

Balas

Keren pageloadnya Gear hehe....

Balas

Keren kang :D, bikin tutor buat menu pop up kayak blog ini dong :D

Balas

cara kerjanya seperti pada tutorial ini:http://mas-andes.blogspot.com/2014/01/membuat-lightbox-widget-contact-form.html

dan

http://mas-andes.blogspot.com/2014/01/membuat-efek-jquery-modal-dialog.html

Balas

wau. efeknya keren zob... thanks..

Balas

gan fadeoutnya berhasil tapi kok fadeinnya gak jalan ya?

Balas

punya ane kebanteran kang :P

Balas

wow ,keren efeknya gan...

Balas

fungsinya mmang keren gan.. tapi bbrapa tampilan widget ane jadi ga keload gara2 itu..
btw, thanks udah sharing

Balas

Hebat...
Alkhamdulilah... akhirnya nemu referensi juga untuk belajar efek-efek pada cms blogger...
Mohon bantuannya Mas :)

Balas

Maaf Sebelumnya saya ingin anda mengunjungi Blog http://literaturbook.blogspot.com/ untuk Menjadi Becklink di blog saya...

Balas

Mas, saya suka dengan hasil dari tutorial ini. Tapi mengapa saat mengklik gambar di postingan blog malah membuka alamat gambar? Padahal sebelumnya adalah membuka photo viewer blog

http://cronosal.blogspot.com/

Balas
avatar
Anonymous

makasih mas. saya pake script yang pertama, hhe...

Balas

nah ini baru keren mas andes

Balas

Nice post... i enjoy it

Balas

kren gan efeknya.. bisa dicoba ini..

kalau ada waktunya, kunjungi blog ane ya gan,

http://rizkiwebsite.blogspot.com/

Balas
avatar
Anonymous

wah keren banget...saya sudah coba sangat-sangaat membantu..

Balas

mantep masbro ane bloger pemula lg butuh rferensi bwt optimalin blog ane yg lola krna banyak gambar

http://easychordx.blogspot.com

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "jQuery Efek fadeIn dan fadeOut Page Load Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode