Cara Membuat Efek Animasi Loading Keren Pada Blogger

di March 01, 2016

Cara Membuat Efek Animasi Loading Keren Pada Blogger - Nah jumpa lagi dengan saya pada bloggerku.com. Kali ini saya akan membahas bagaimana cara untuk membuat efek loading pada blogger. 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.

Efek loading ini sebenarnya tidak akan membuat blog sobat menjadi lebih berat, namun ini akan membuat blog sobat menjadi tidak acak - acakan ketika blog sobat masih loading atau belum selesai memuat semua content. Kekurangan dari efek loading ini adalah membuat pengunjung menjadi lama menunggu karena tidak bisa melihat langsung content atau isi yang akan di baca dan akan meninggalkan blog sobat karena terlalu lama, biasanya loading akan menghilang ketika semua content yang dimuat sudah selesai, tapi jika content tersebut banyak??, maka akan membuat loading tersebut menjadi sangat lama.

Efek loading juga ada keuntungannya juga loh, keuntungannya yaitu sudah pasti membuat blog menjadi lebih cantik dan lebih keren untuk dilihat :D, nah untuk memasangnya tidak terlalu sulit. Sebelum memasang sobat harus sudah mengetahui keuntungan dan kekurangan dari menggunakan efek animasi loading pada blog di atas, jika sudah membacanya yuk kita lanjut ke bagian cara untuk memasangnya.

Cara Membuat Efek Animasi Loading Keren 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

http://1.bp.blogspot.com/-yw93SfO7HUg/VA16kPJrEMI/AAAAAAAADX0/zA_AYKGrLpk/s1600/Loading1.GIF

http://4.bp.blogspot.com/-Swt685lt6ys/VA16rHry5eI/AAAAAAAADZY/IpcXMen9Baw/s1600/loading3%2B(1).GIF

http://3.bp.blogspot.com/-RGDTwjwFAfI/VA16nTy73yI/AAAAAAAADYY/2Q_bv6PSZpk/s1600/Loading6.GIF

http://4.bp.blogspot.com/-oXnJb-Hf8yg/VA16mCcCwtI/AAAAAAAADYM/L-6mkDGWBd8/s1600/Loading4.GIF

http://3.bp.blogspot.com/-uQAf8glZH6U/VA16o7gn9SI/AAAAAAAADYs/MiVYc4q4VYw/s1600/Loading8.GIF

http://2.bp.blogspot.com/-EPaWBo-HO5Y/VA16pR-LyzI/AAAAAAAADYw/9J60a2EkJlI/s1600/Loading9.GIF

http://2.bp.blogspot.com/-gPwCiVWVA0E/VA16sbLarKI/AAAAAAAADZg/53_r4Hiy0Bo/s1600/loading9%2B(1).GIF

http://1.bp.blogspot.com/-GbiMJDnzg6Y/VA16nNujPAI/AAAAAAAADYU/-8FLWN8gGX0/s1600/Loading5.GIF

http://4.bp.blogspot.com/-RNEaIW8mfwM/VA16kh4jw_I/AAAAAAAADYA/8BzQLvaNjXs/s1600/Loading2.GIF

http://3.bp.blogspot.com/-KuPPWeIiKEk/VA16pu4vxVI/AAAAAAAADY4/DORC4PejW6k/s1600/loading1%2B(1).GIF

http://3.bp.blogspot.com/-7ijf80PfNiE/VA16qe_bMvI/AAAAAAAADZI/UOFV0ortsc8/s1600/loading2%2B(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