Cara Menambahkan Efek Animasi Saat Blog Sedang Loading

Trik ini saya dapat dari blog tetangga yang kemudian saya ambil inti pembahasannya saja.
Buat teman-teman yang ingin membuat tampilan blog menjadi lebih profesional dimata pengunjung, mungkin cara ini patut Anda pertimbangkan.

Sebelum saya panjang lebar menjelaskan tutorialnya, sebaiknya Anda lihat dulu demonya disini.

Sudah dilihat? Jika tertarik maka langsung saja dipasang kode-kodenya dibawah ini.

Langkah 1.
Anda cari dulu URL JavaScript versi ini dalam template https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
Jika belum ada, maka masukkan kode dibawah ini tepat diatas </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Langkah 2.
Cari ]]></b:skin> lalu taruh kode dibawah ini tepat diatasnya
#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:#000 url('http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif') no-repeat 50% 50%;
color:white;
padding:1em 1.2em;
display:none;
}

Langkah 3.
Masukkan script dibawah ini tepat diatas </body>
  <script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
      }, 10);
  </script>
<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>
Simpan Template

Keterangan

Jika script dari googleapis tersebut telah ada dalam template Anda, maka langkah pada no 1 diabaikan saja.

Animasi ini akan bekerja disaat seseorang membuka tautan baru dari blog Anda. Sesaat setelah link atau tombol diklik, maka halaman akan langsung disable dan semua teks, gambar maupun link menjadi tidak bisa dilihat dan diklik. Serta animasi baru akan muncul selama proses loading belum selesai.

Anda juga dapat mengganti gambar/ foto menjadi foto yang lain, caranya dengan mengganti http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif diatas menjadi URL foto/ animasi Anda sendiri.

Disini saya juga telah menyiapkan beberapa URL animasi yang bisa dijadikan pilihan salah satu favorite Anda.



http://4.bp.blogspot.com/-TPG2f3oEJWc/UQaijnks84I/AAAAAAAAFOA/KwXSCwh7Cxs/s1600/loading1.gif



http://4.bp.blogspot.com/-FASuc5X70e8/UQaijioU_8I/AAAAAAAAFOE/UM9HTErEowA/s1600/loading2.gif



http://2.bp.blogspot.com/-2LpTZKLCHZU/UQaikSj-wuI/AAAAAAAAFOY/vXpl8uZ7mGc/s1600/loading3.gif



http://1.bp.blogspot.com/-W9bm3Oc6WzA/UQaik9ql4AI/AAAAAAAAFOg/3fyDf9Agbso/s1600/loading5.gif



http://1.bp.blogspot.com/-udgAVO3FySQ/UQailMH35aI/AAAAAAAAFOo/JD6vDePg9OU/s1600/loading6.gif



http://2.bp.blogspot.com/-Va-9DPoGnio/UQailTDIWUI/AAAAAAAAFOw/iWgEqVu0zFg/s1600/loading7.gif



http://2.bp.blogspot.com/-yz54Aj8Fp1s/UQailmVa8BI/AAAAAAAAFPA/LT0KOGY-_lk/s1600/loading8.gif



http://3.bp.blogspot.com/-eeiu8xL2Qls/UQaimEebl4I/AAAAAAAAFO8/hSK_kq7C8Po/s1600/loading9.gif



http://3.bp.blogspot.com/-bWMOJ7ywzjg/UQaij1cSLiI/AAAAAAAAFOM/Nrdgh1W6hys/s1600/loading10.gif
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini