Cara Mudah Membuat Efek Loading Pada Blog

Kali ini saya akan membagikan tutorial Cara Membuat Efek Loading Pada Blog dengan langkah sederhana namun dengan hasil yang sangat menakjubkan. Dengan menambah efek loading ini takkan memberatkan loading pada blog namun akan mempercantik tampilan blog.

Cara membuat efek ini tentunya sangat mudah, hanya dengan menambahkan kode CSS dan JQuery, kita telah dapat memasang efek ini pada blog sobat. Untuk itu mari simak langkah-langkahnya berikut ini, Sob!

Pemasangan Script

Langkah 1 : Memasang framework jQuery

Untuk mendapatkan efeknya, maka harus memasang framework jQuery. Maka dari itu letakkan kode berikut ini di atas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Pemasangan framework jQuery pata temlate cukup 1 saja. Apabila ada beberapa versi atau script tersebut, maka efek tak akan bekerja.

Langkah 2 : Pemasangan kode CSS

Letakkan kode CSS berikut ini sebelum ]]</b:skin> atau </style>

/*Page Loader*/
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRR_KCp7jK9LE6FCT5wQ1dpKDh7iypeJ8dGme9HkG8hGvdbwDPl-6wo05wT4pJRVdBKoXlvPJADqDJwXCsY6Hu7e2sHGPxna_2zF8OwX_84KKWZqU8tIbNCRT-seh1A0m374KdOKYkTiqO/s128-no/loading.GIF') no-repeat 50% 50%;padding:1em 1.2em;display:none}

Langkah 3 : Pasang kode penampil "Page Loader"

Letakkan kode penampil berikut ini 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(9000).fadeOut(1000);});
//]]>
</script>

Langkah 4 : Lalu save template dan coba kunjungi blog sobat lalu klik link apa saja yang ada di blog sobat dan lihat apa yang terjadi.

Cara mengganti animasi page loader

Untuk mengganti animasi page loader cukup mudah yaitu hanya dengan merubah url :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRR_KCp7jK9LE6FCT5wQ1dpKDh7iypeJ8dGme9HkG8hGvdbwDPl-6wo05wT4pJRVdBKoXlvPJADqDJwXCsY6Hu7e2sHGPxna_2zF8OwX_84KKWZqU8tIbNCRT-seh1A0m374KdOKYkTiqO/s128-no/loading.GIF

Untuk gambar loadernya bisa diganti dengan mengunjungi http://preloaders.net/

Beberapa animasi ajax page loader

Berikut ini adalah beberapa animasi page loader yang disediakan oleh http://preloaders.net/ yang bisa anda pilih untuk menjadi animasi loader di blog anda.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO3chpwLDOsdXuy9h18nNAV_a6KgDvbuucwdztg9CFX45u92lHumd50ZRXaUr3-TvYc8DuugHO2ONOTz8uwIS78Ng3CYLcJzaF2z_VS0jvdh1oGccjlh4Z17mqOxisEG_bYRiSyNo_TNw/s128-no/Loading1.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKuPJ2qHifXTon3uJ-3U2iJ_qdffr3dRas3z4q4B4ZQss1rdL8rrmZB7QD7cPfC23wdDi0BGmunQ51AZjLh-DeW2m2JG-_XIFmugCDgiVrHcDeDn2zbKbOg7kbadAOPpSsvpQkx9mAhxI/s128-no/Loading2.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2ND8NBQAMTv_SRWv6R_Ocr4Gtro4muY2MSDEh39SqoZ3k9bdXr-018O5UgtZO34C_f-SIAmhQSfnvQdJUvyc8lP0JvCRQ5TnhXUDc5gWtohD-hmN_GJH9cvkSRtvHUL02jNUahSTT3Hw/s128-no/Loading3.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqf7OIpmUcs22q42dKuEh4Po1rHpWS_xhMmNzeVdVF-CihDQC0UxLkP6eI3KAS-oDc8whO-NX9PGOj1-jFxxDUNhDrCvyymT2MtCrw6XA8s1SD_z6F3Osck4LniqEWGi0KMtmnn1Qq_TQ/s128-no/Loading4.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWqXw7mjvDltqjc6I8nRWTa_YFk5RoG1uzBWBmefIi3PjaX5_INU1U90h-c1AOPUlzwBZDtb54mJEj-cELg6eLw72O1KdK1b6azd1w5PZhxXg7U6IMepaiLAO0m8YsT6sZkSPaVqvgMT4/w124-h128-no/Loading5.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDrPx1hUNJLYFJYkkySHRgTo-rjvLFp7JNsLpShaYFtdH8QHq0FQjZsv3fjW3NxZCk3wr-y-tH0g1ZXFcRnvJ8MG_Ur0TbE4uDiyMWLHkRlMTMg_lmgxe4jVBeJ_rm6yrZWCvIOHobZj0/s128-no/Loading6.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnMs6dOxVv2TmfD9SNWBExZnZdlJZdIPCCV4GpmRybuO4nqrGGmlk-OIMOAfpoNjl4Ag9lvqtZlt3sXjjcKpy1CAwMu9raufNHpseLti0xY6KnBnXSswwHjRI3BTX_pw1wjk6TsB1VJ4E/s128-no/Loading7.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUfdCM8K7S2KWqnccISmuYK0Q0zt15BW7_lNB_iL-dmqD13-BryEb5uRmYQeplGpL4bNByJo6hroDfPpebs15oPsNa8jGi3dxcHwXitizC8wI6xPEJIjWtLzjO-xaYEEQNyj_JqRK1-6k/w128-h54-no/Loading8.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXc3l6wMtwxGHr0Ha3xYNZLxijENv-FQ97LfBGThWfsic4LAHIh6RNIN8ElbuYWhc_tUjJO6wWj4pSYL3k3QmZyvQSTfsBkopgsp99pbi2uKZHOaW2bhm6nyvg-9iZPP60qwalfg3dG1Q/s128-no/Loading9.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkJi1r8wJaohq1TEUYMUzIYOWzdFb2sNPz2Ei9pPpnuK-iAlM__QKj-W7aWyIf_N4JiDgF_vdLKC2aV8v4kw-WRAUBnmR7btTyY5tfmRxY7I0MdSX7CUoDM_s6Rm9MmYjozq9LM6tlKzU/w128-h40-no/Loading10.GIF

Selamat menikmati sob! ;) Jangan lupa komentarnya sob ane tunggu :D hehe