Cara Membuat Efek Animasi Loading Sederhana Pada Blogger

Selamat Malam Pengunjung Blog Tio Note ,Kali ini saya akan membahas tutorial tentang bagaimana membuat efek animasi loading pada blogger. Sebelumnya saya akan membahas apa itu animasi loading . 

Efek loading adalah efek yang akan berfungsi untuk membuat blog memunculkan sebuah animasi ketika blog belum selesai di muat. Yah, biasanya akan muncul ketika sobat berpindah page, contoh ketika sobat berada di Homepage, lalu sobat mengklik sebuah link maka akan muncul sebuah efek loading yang keren pada blog sobat.

Langsung aja kalian bisa ikuti langkah - langkah yang sudah saya berikan dibawah ini 

Cara Membuat Efek Animasi Loading Sederhana Pada Blogger

Cara memasangnya cukup mudah, sobat tinggal mencari </body> lalu simpan kode di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(8000).fadeOut(1000);
});
//]]>
</script>

Nah setelah itu sobat tinggal menambahkan CSS di bawah ini dengan cara mencopykan dulu kode di bawah ini, lalu pastekan tepan di atas kode ]]></b:skin>

page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background: #000 url("URL IMAGE") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}

Setelah itu sobat tinggal ganti tulisan URL IMAGE dengan link gambar yang akan sobat gunakan, saya sarankan sobat untuk menggantinya dengan gambar gif atau biasa disebut dengan gambar bergerak. Jika sobat malas untuk mencarinya, tenang saja saya sudah sediakan beberapa gambar yang mungkin akan cocok digunakan di blog sobat, yuk, langsung kita lihat saja gambar gambarnya di bawah...

Kumpulan Gambar Loading .GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ9Ajgon8boLWNHckKRWgcoXs9EV1Xsr6akwvTSfFBSKiJacngmxuwH4-Q-Yam7ekf2oIFatM3ZiCSqapXudkiHPznKyO5Mtrei23IFJjneYe9X9osFw8c8ikUx2-SwLvRNnTLD-CwA0A/s1600/Loading1.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdCt9LMmlEaFCskQFuSdoZj2Z9HlxUKhIqt7AFYehZwoJatqUczfVB0Z9whMfHZPGnaQ3NJmxMR9fw_B5zNLBG0IsB_IpOsR2-ta34mae9NzLzFQ6YROCbZCgxtJlH-TinU3dfXb1I2nU/s1600/loading3+(1).GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYHnotioyEihCtAo-7Qo2a35e-cZllWfcQAOWbtpfmNINIXDLEUTxBGYZ2AFD48qza1y8LwT3Dpky6svuKftnptxojZ8JF8XUug1lzRX9qxx1HTMIYNLOfBuVSt0Nt9fEHlOSXf-NL20E/s1600/Loading6.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM2qXweAlx2i-K5HqhcJNvk-V4qJA38o0ibWoxV_5UgtIINF_dm9x6fVfNvHbwopzjbC4Z9VZLbjYqMUANGcLVSNMYhBegwLAOEG6TW006DEqEEXqhSEtSF0ms00IFdhCOu4wYZcyDXWo/s1600/Loading4.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVgvVmUB_zmyJ36B1NS6RTIv_-fVzdRBxVTJmfZKqdhyphenhyphen7znt7r_H_lUXsenbLtZGMHbn5GpebM7dsdKCd2w7Oqg3oDvhHugYjo3tJRHUe18_QmfFqiP5n0XGmjM8BjJrpNqu6QVk5oMlM/s1600/Loading8.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU65koLD4IuIZ6lCZDny3nF8DgVISpQ63cyWZsP18ElJV29EtRYCs4ccw2GazgSyFbcFqQMCduDaxxJheC0TdQ2ELLluRe8RqwGkZoZtEdPP0ekH1-tzsaGu-ArEzsU5ksmuGNpSeklDQ/s1600/Loading9.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqG8TAsehd97zR4ulC4czZEWY-ImoRIMWCyXVk-cLsQKL6cVtd0sGp5yoAdhNd_Pz6z55p2DuClsDstVw1u-IdLxZ5cs6tnGmCVKEOx6jeWE7wTpt36A-QYLhPrfCw3vLJV2cCAn6oJz4/s1600/loading9+(1).GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Hpl_CiC2m4Ot6DwNfMDkcPyE5AKu8CFtpmJ5ksGiXef9zkjTOKM2qLfao8xR5m_CQvZHGsE8q_2kZv06d02doEHNpuSFljw0o1sMhr2aY-_MQwW2-iB_tQMhkkesJapZL0pBkCV4e_8/s1600/Loading5.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ASzMLf5pucKbBRtubdJnCDszYMMKpQbTWmeoZg2N8NFM6PSeMK5dOUudASm0qFIjfcd6UKHlLCvdeODni4AZpAog70SBF5h4D2fvmUcn1iKenHL7qvpjPWQXYLeMbVKxtNhf_0280H0/s1600/Loading2.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhup6Idinp6Z2XOfXKY1AdLRGPOXMuDKP1Bcxrro4fFbzBoXXHlpwN3MEDkV0cxExTL9BwaABc6vMRkel5dl_8vt9S-KqFPlzGd_QJSAh76gadeZIM-tThoJNSy3m-2GoYihNIuT-fFih8/s1600/loading1+(1).GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuuDQDUJORIcBf58PuJv6u7YBAWjGpLRVqY9NjxblWii0Ftg86u6ro4Ghv-InsvLlnjvZtNG6erIgapQXM6pbXNgRmqSaJN7i7_DsRpMXbOgx2TdAHtg8iZ0D3beumZDNEYYFes3GTJIE/s1600/loading2+(1).gif

Nah itulah kumpulan gambar gambar GIF loading keren pada blogger yang sudah saya kumpulkan dan saya bagikan disini, untuk gambar lainnya sobat bisa mencariny di google, dengan kata kunci "loading .gif" sobat bisa menggunakan link gambar tersebut.

Sekian Cara Membuat Efek Animasi Loading Keren Pada Blogger, sampai ketemu di artikel selanjutnya


Tag : Cara membuat efek loading blog, efek loading adsense , cara mudah , css , jquery