Fade In / Out Loading Pengaruh Pada Blogger Posting

Sebuah efek yang sangat umum di jQuery adalah efek fade yang menyembunyikan atau menunjukkan suatu elemen dengan memudar, dan kita dapat menggunakannya dalam banyak cara seperti misalnya dalam navigasi blog. Naskah berikut tidak hanya itu, dengan memuat halaman dengan efek memudar ketika kita browsing di linkinternal yang ada di blog, seperti judul posting, label link, arsip, link navigasi, dll. 

Anda dapat melihat contoh dalam demo blog , klik pada judul posting apapun dan melihat efek memudar saat halaman sedang loading. 

CARA MELAKSANAKAN FADE LOADING EFFECT

1) Untuk menempatkan efek fading ini di blog Anda, pergi ke Template Anda> Edit HTML: 

2) Klik di manapun dalam area kode dan mencari </ head> tag menggunakan tombol CTRL + F: 

3) Kemudian, tepat di atas </ head> tambahkan kode berikut: 

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
/ / <! [CDATA [
$ (Document). Ready (function () {
$ ("Body") css ("z-index", "-10").;
. $ ("Body") fadeIn (0);

$ ("A") klik (function (event) {.
event.preventDefault ();
linkLocation = this.href;
. $ ("Body") fadeOut (500, redirectPage);});
fungsi redirectPage () {
window.location = linkLocation;
}
});
/ /]]>
</ Script>
<style>
html {
background-color: # F2F2F2; / * Warna memudar * /
}
</ Style>

4) Simpan perubahan dan hanya itu. Dalam hijau Anda dapat melihat di mana untuk mengubah warna yang memudar pada loading halaman. 

Naskah asli menyembunyikan tubuh halaman saat memuat, saya lebih memilih untuk mengubah properti itu dengan z-indeks negatif untuk menghindari masalah dengan robot mesin pencari yang dapat mempengaruhi posisi.

Masalah? 

Pertimbangkan bahwa efek tersebut dapat meningkatkan waktu loading blog, jadi saya sarankan menggunakannya hanya ketika beban blog Anda dengan cepat dan tidak memiliki terlalu banyak script. 

Jika Anda sudah menggunakan versi lain dari jQuery menghapus lainnya, hanya menyisakan ini yang akan readed pertama. 

Jika Anda menggunakan Mootools atau Scriptaculous, maka Anda harus membuat beberapa modifikasi padakode agar kompatibel. 

Jika Anda memiliki script lain dengan efek fade, maka bisa mengganggu ini dan Anda mungkin tidak melihat apa-apa pada halaman kecuali fading warna, dalam kasus seperti itu lebih baik tanpa script ini. 

Anda juga dapat menggunakan efek ini hanya pada beberapa link, misalnya, jika Anda ingin tampil hanya ketika Anda mengklik pada judul posting di link navigasi (posting lama dan posting baru), dan pada tab atas, lalu ganti baris ini: 

 $ ("A") klik (function (event) {.

Dengan ini: 

 $ (". Pasca-judul,. Blog-pager-older-link,. Blog-pager-newer-link,. Tab"). Klik (function (event) {

Dalam beberapa kasus, halaman dapat memuat untuk beban kedua dan kemudian dengan efek fade, ini mungkin "normal" karena browser lambat untuk membaca script pada beban halaman. 

Terlepas dari kelemahan ini, saya pikir itu adalah cara yang sangat elegan untuk memuat halaman blog saat browsing mereka, bukankah begitu?