Cara Membuat Efek Animasi Page Loading di Blog

Si Tukang Copas - Selamat Datang di Postingan Cara Membuat Efek Animasi Page Loading di Blog. Efek animasi pada blog ini merupakan suatu efek page loading yang terbaru namun sangat sederhana sekali, tetapi animasi page loading di blog ini sangat keren sekali dengan efek-efek animasi loading yang begitu menarik dan banyak pilihan efek loadingnya. Banyak sekali website yang menyediakan ajax loading page untuk blog, dan saya juga akan membagikan beberapa efekanimasi loading page yang saya ambil dari salah satu web penyedia ajax animasi page loading.

http://img.prntscr.com/img?url=http://i.imgur.com/yLIapdI.png

Untuk membuat efek animasi page loading di blog kita hanya menggunakan sebuah CSS dan jQuery agar bisa menjadi sebuah efek animasi page loading di blog. Dengan menggunakan efek animasi page loading ini tidak akan terlalu memberatkan Loading Blog Anda, sehingga Anda tidak perlu khawatir dengan penggunaan efek animasi page loading pada blog Anda.

Copy CSS Loading Blog (Ganti #LinkGambar.GIF dengan gambar loading kalian atau bisa lihat kumpulan loading blog dibawah )


/* CSS Loading Blog */
#page-loader {position:fixed!important;position:absolute;top:0;right:0;bottom:0;
left:0;z-index:9999;background:#fff url('#LinkGambar.GIF') no-repeat 50% 50%;color:#fcfcfc;padding:1em 1.2em;display:none;}

Buka edit template dan cari kode ]]></b:skin> , lalu paste CSS Loading Blog diatas kode </b:skin> .

Terakhir copy Java Scirpt ini dan letakan dibawah kode <body> atau bisa juga diatas kode </html>


<script type='text/javascript'>

//<![CDATA[

$(document.body).append('<div id="page-loader">Loading...</div>');

$(window).on("beforeunload", function() {

    $('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);

});

//]]>

</script>

Kumpulan Loading Blog Keren

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu7pUZgQhiLcQVcyvrJ0mp-w71wEZHiaxi2x30WBKOZN1DdOIubdLq-3sWSpvx3G_LqJUyQVx07u1QpxeeezU766dod84lJwdh1-uSkwEq_aKloVZczWqpcvJE_7d3tiJl0NQbN-vuHbsi/s1600/Loader7.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAtXsQ0yT3oBvEDyDUmJY_-uvTnut50ZGB5okncbUauiwVZB1uaXTf2ov4XYvEKCiNxbPEdcYKrwmR3gU_7pIHsascDEy3-3cIleFbxPwlrYeS_agyEN8wP9-DX5zzNCSLmZyEq7F3D12P/s1600/Loader1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2SX_HAp2CxWRntaFznRrMUAmAjsOwroRigUaJwGixJp07_ElzWeyzVPVZdv9te6aj9nJ5wcbXl9Eq07ztpeXdSCsJo1GDt73Fme3IZfX2eSZ_JZVB5Qzl1LAYoK83ZCW1DYIow_vD5bWz/s1600/Loader6.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFTCubSvC50pv1IFDxVWezE15rNo2fwugdEx-RkcZ4gCUP-7hzzqDdrA1FWjGbses1-mdK9AOzAMP5vFQ0tk7WO4EYBB0yMFNsj7IgJPmiTDzLywo3WLruZ-UQ7JW5ue7BLUrWdjCzVTVe/s1600/Loader2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHKO-rFzGPka56Lj8WZL6DsHZhO-KcP_-2s2PgTLcC1nltZ9XqmMP0lcBSq-So4sCVabZH1jppFNv8oq0-jKuk3mbDmfmbHieBBdD8wVaHM5lKi382I0seWZZU4nDbx4pxDkfm3O42Fv4a/s1600/Loader3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz37mafy8WOT3vQvUJ4h7kfmY13stXoxrivA-feBi3cNuPp_dqUwMCh6Sey4H5lomPGkk4Sw0r-lDjzgdE3TkQLQEWdKuyvHFlmB1cQFSCqncwyfbbDuNNnJU7W03zy-MiZ-Nb-DaM7yoC/s1600/Loader4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJjZhMqTjZZeIdq2up6ulBSqILwEp6RNFzRaU0i9T-VN66Mf1vbAs1rx_xVAvMOdG2ENZNFIfo2dIYsSO3SoA1GYbIif8D_n0arJXWTf3t-E_hQaeyn68zQEy7M1eI-HSMe1NW1K4fp4ZA/s1600/Loader5.gif

Title : Cara Membuat Efek Animasi Page Loading di Blog
Description : Si Tukang Copas - Selamat Datang di Postingan Cara Membuat Efek Animasi Page Loading di Blog . Efek animasi pada blog ini merupakan suatu ...

1 komentar:

Balas

Unknown Administer

Sabtu, November 15, 2014

Cara Membuat Efek Animasi Page Loading di Blog 8-)

Selamat Datang Di Blog Si Tukang Copas, Terima kasih sudah berkunjung.
Budayakanlah Berkomentar
Sebelum Berkomentar Silahkan Baca Peraturan nya.
1. Dilarang Flood
2. Dilarang SPAM
3. Dilarang SARA
4. Dilarang Promosi
5. Dilarang Berkomentar Memakai Bahasa Kotor / Binatang
6. Dilarang Mencari Keributan Disini
7. Berkomentarlah Dengan Bahasa Yang Sopan
Terima Kasih