Search Suggest

Tips Membuat Efek Animasi Loading Menarik di Template Blogger kita

Baca Juga:

Bagaimana membuat efek Animasi Loading Menarik di Template Blogger kita - Pada kesempatan kali ini, Saya 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 tidak membuat blog menjadi lebih berat, namun ini akan memjadikan blog sobat 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 anda 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 cukup lama.

Efek loading juga mempunyai keuntungannya juga, keuntungannya yaitu sudah pasti membuat blog menjadi lebih cantik dan lebih menarik untuk dilihat, untuk memasangnya tidak terlalu sulit. Sebelum memasang anda harus sudah mengetahui keuntungan dan kekurangan dari menggunakan efek animasi loading pada blog tersebut, jika sudah membacanya yuk kita lanjut ke bagian cara untuk memasangnya.

Tips Membuat Efek Animasi Loading Menarik 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

 
 
Loading


Loading


Loading


Loading


Loading


Loading


Loading


Loading


Loading


Loading


 


Demikian kumpulan gambar gambar GIF loading keren pada blogger yang sudah saya kumpulkan dan saya bagikan disini, untuk gambar lainnya anda bisa mencarinya di google, dengan kata kunci "loading .gif" dan anda bisa menggunakan link gambar tersebut. Semoga bermanfaat

Penutup

Sekian Penjelasan Singkat Mengenai Tips Membuat Efek Animasi Loading Menarik di Template Blogger kita. Semoga Bisa Menambah Pengetahuan Kita Semua.

Posting Komentar

pengaturan flash sale

gambar flash sale

gambar flash sale