Cara Membuat Efek Animasi Pada Loading Blog

Loading blog dengan efek animasi? Tentu sobat blogger sudah pada tau apa itu, baik tau pada saat menjelajah ke blog orang lain maupun saat memasang template yang sudah di tanamkan efek animasi ini oleh pembuatnya.

Nah, sebelum kita membahas cara membuat efek animasi pada loading blog seperti judul di atas, bolehlah sedikit saya bahas sedikit kelebihan dan kekurangan efek animasi pada blog menurut saya pribadi:

Kelebihan:

1.Tampilan loading blog lebih keren
2.Bisa membuat orang yang awam dalam dunia blogging menjadi terhibur
3.Memberikan kesan profesional pada blog

Kekurangan:

1.Menjadikan loading blog seakan menjadi lebih lama, sebab efek ini akan hilang jika seluruh halaman yang dituju sudah terbuka semua
2.Menambah berat pada loading blog karena adanya penambahan script
3.Membuat pengunjung yang kuota paket internetnya tinggal dikit merasa jengkel

Itulah kelebihan dan kekurangan untuk pemasangan efek animasi pada blog menurut saya. Khusus point dua pada daftar kekurangan di atas, hal itu bisa saya simpulkan karena pada saat berkunjung ke blognya blogger kawakan Indonesia, yakni Kang Adhy Suryadi pemilik situs Kompi Ajaib. Di situ beliau menyebutkan bahwa pemasangan banyak script ternyata bisa memperberat loading blog, sehingga beliau membagikan trik tentang cara pemasangan iklan agar lebih ringan dengan hanya menggunakan satu script saja untuk beberapa iklan yang di pasang. Trik itu bisa sobat baca pada artikel ini "Trik Agar Iklan Adsense Tidak Memberatkan Loading Blog".

Cara Membuat Efek Animasi Pada Loading Blog

1.Masuk pada mode edit template blog sobat

2.Cari kode </body> (gunakan Ctrl + F agar lebih mudah)

3.Taruh kode di bawah ini tepat di atas kode </body> tadi

//<![CDATA[

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

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

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

});

//]]>

</script

Sumber Script: www.bloggerku.com

4.Cari kode ]]></b.skin>

5.Letakkan CSS berikut di atas kode ]]></b.skin> tadi

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

}

Sumber CSS: www.bloggerku.com

6.Ganti kata “URL IMAGE” dengan URL gambar efek animasi yang sobat inginkan (tanda petik jangan sampai hilang)

7.Selesai

Nah sampai di sini, sobat sudah selesai membuat efek animasi pada loading blog blog sobat. Silahkan melakukan uji coba bagi yang tertarik memasangnya, jangan lupa back up dulu template sobat sekalian agar aman bila terjadi kesalahan saat pemasangan.

Untuk contoh dari beberapa efek animasi loading blog bisa kalian lihat di bawah ini, lengkap dengan URL nya, jadi kalian tinggal copas saja URL itu dan terapkan di blog kalian jika memang ada yang cocok menurut kalian.

Kumpulan Efek Animasi Untuk Loading Blog

Animasi 1

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFikxS-cGDL4V92e7kbX-nfJKzUp6BYE12QJWYXef5ey6FNVt8JgvSJIuGJTM-dn3cN9rNDMq0hyjzx4llid4KIXBxkRLjK-qsXe2IPmo0agp5wRJnViIyhuLHIU6Txcm49tCcQguk_30/s1600/Loading1.GIF

Animasi 2

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFQljqcBJ1d5SkVCYI83xyWaU_FSS6xZbfUMFXPFiV0th9xUApqnI0_S6KYCiFznqo5C2HOEqDALQx1svcEiyprMYP1hlHt3TW4QrtkSkUPGIy0lBe_cORSD8q9lFo7nzzqC479HB-3OQ/s1600/loading3+(1).GIF

Animasi 3

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiu20Q5H2BdJ526kA1UjFXO1XUNeUZWifdARMjEkruBAnVkyCf-zEEBncBvmPs6JTWreefd903X90_BxjsgOvf-U8wRq7ZaL44u33ctllWuIfhckr5npa-gUPqvOLcpN23Ir8T9ycK8lw/s1600/Loading6.GIF

Animasi 4

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikBpG5WrHIYwNBxCAmLL2AP7j_mO6nFeyYADnEiJyuVyXtkSFzC7TevRgdFZmy5FOEpgC4IOjkGpmKkV89AGLa4aZyrwBfzB9FqAHSZlUJjwBAgAznH1-Uj7D3etTEVq6mm4E4uI_Tv70/s1600/Loading4.GIF

Animasi 5

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ZViLyD8MTfgtN2ZSGaBsg9yGMBXLDQqwYbd5r2anGrj21UbatZICXWM8AeTpHgCjrSDbYE2luHRscf8I1xYbRqEBUmiM3mY7iK396Nbwj5hjLc08fPp5yilUqGiqBV3QPTo0hlULdRk/s1600/Loading8.GIF

Animasi 6

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCd3RvWJEAHcNEskEEyZ2VD39wCBsCxfBTx_ajIW5cklI2M7UyRSx9xvFiPCV4cXwBNBw9CGx7xfqoCLgmunHMbpMzUwOKZvP61uQ9flWIfIN76ZOSOYNEvi1gstlp67g1p6QLC9ZKgIY/s1600/Loading9.GIF

Animasi 7

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDkLJKS__5ykptHZG33Rp4hJBQA8fjDrQMBYqPK-PMd8l7VZradDpgrMIvzdGwQAn3hCD4PeCsDZhS0lF1MibzwWXFAYDXvot_MQNHKFwgUnYik_AZWMmhRbg7yqPSYygUHgqyq4OkwAk/s1600/Loading5.GIF

Animasi 8

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3oa7buJk9_XloGieiLeBPfi7r_IKNJrW5HLV3qX0oAKVKohsvpfGTLmdTTX7ylL0UUzS8bxrG4Reu1AGM1et7-uq_nUlemxoiWb3eDNhDGGEcihagwydozGJ-E7n0lsFw168CTU_RXmQ/s1600/Loading2.GIF

Animasi 9

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyqrEs-G9Tnl7uaqSvAPWJirs4bdvKGNW5lX4FvOLKHHluvXzrvIKo8bQ6E6KfChTR2iQPlKg1bfWrIpZhZxJ4dnv8uKJhtAUwOqtTYSDDsb8QYHaiPUAUUIo2tnzk8_k7bIBZwq4epbI/s1600/loading1+(1).GIF

Animasi 10

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

Animasi 11

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp_pqgYf3SYthP_OFAt5EUuOTeyNgoxZqtsQbs7BxX_tU72jhIa6l7qjSKr6LcYNGxM47y5bo6RaFBq13Mkmp8x1nVY863hWNyaOxBhGvDAngUtRefeUn27crfCoYaUTOKRhJzo0bdXKA/s1600/loading7+(1).gif >

Animasi 12

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ZETRABOZONZklOvmHuWbYChLprIEt4lYB2VEe4_48OcsE7e_D7kQ3xatZ6qUz0gqVAzO1lhGvYUJyBbGJ_qWuhAFJk0g8mbcfjn0guRxOYplJ74VHJ64IlkBPKd_qvxA18j7nbgvC6E/s1600/Loading3.GIF

Animasi 13

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj11yA57on7h2YWzruALO9gMw8EvX8YDd9xUHkC0gzlPbyOWgplYfLvj8vy9LaaiRmI6keCySSHkAe5iFrhfchhZL8khCH0R1jRiEkfheULdpTCAbZlCQFFCwRhPmWdmjvFI5D5dLTwvTY/s1600/loading9+(1).gif

Animasi 14

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0dxtC-sb-BT_RhYoAwggMSYUXuxig2gxPu9Z6jqylj41KasS9faiNUystq19lNbGimEpf4772Uo_GqNuobBY5rGD2QDDjvnHNU_ctfP0gltfXU8ZDH2qm7sKOZSOMBCmxlKeJvLt5lfY/s1600/loading10.gif

Efek animasi diatas hanya sebagian kecil dari ribuan efek animasi yang ada, apabila sobat sekalian ingin mencari efek yang lain, silahkan sobat blogger sekalian berkunjung ke preloaders.net. Di sana sobat bisa memilih dan memodifikasi sendiri efek animasi yang sobat inginkan, ada yang versi gratisan dan ada juga yang berbayar.

Sekian dulu informasi dari saya tentang cara membuat efek animasi pada loading blog, silahkan dicoba dan semoga berhasil.

Baca Juga: