Cara Memasang Efek Loading Blog

Selamat datang kembali di Blog Guns sobat, kali ini saya akan membagikan Cara Memasang Efek Loading Blog. Dengan memasang efek loading ini, selain dapat mempercantik tampilan blog tujuan utamanya adalah untuk menampilkan objek tertentu sebelum semua elemen halaman selesai dimuat. Seperti kita tahu bahwa dalam proses pemuatan elemen tersebut terkadang susunannya tampak acak-acakan dan tak tertata rapi seperti yang seharusnya. Maka untuk menutupinya kita dapat menggunakan efek loading blog ini.

Efek loading blog yang akan kita pasang kali ini menggunakan jQuery, jadi template Sobat harus memiliki jQuery library. Bagi yang belum memilikinya Sobat dapat memasang kode berikut di atas </head>

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

Bagi Sobat yang telah memasang jQuery library sebelumnya versi berapapun, tidak perlu memasang lagi, karena dalam sebuah template tidak boleh terdapat lebih dari satu jQuery library

Cara Memasang Efek Loading Blog

Pasang kode berikut di atas ]]></b:skin>

#page-loader{

position:fixed !important;

top:0;

right:0;

bottom:0;

left:0;

z-index:9999;

background:Black url('https://googledrive.com/host/0B0gPfP3O6xFIRlVuVzFIMFlwSFE/139331361218.gif') no-repeat 50% 50%;

font:0/0;

text-shadow:none;

padding:1em 1.2em;

display:none;opacity:.7

}

Kemudian pasang kode berikut di atas kode </body>

<script type='text/javascript'>

//<![CDATA[

// Menyisipkan markup tabir animasi

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

// Saat halaman terpicu untuk berpindah/keluar menuju halaman lain...

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

    // ... tampilkan tabir animasi dengan efek `.fadeIn()`

    $('#page-loader').fadeIn(700).delay(3000).fadeOut(700);

});

//]]>

</script>

Ketika saya akan menerapkan efek loading pada blog ini beberapa hari kemarin, saya agak kesulitan membuat efek gambar loading dengan gif animated-nya. Ternyata banyak juga web generator Ajax Loding GIF Animated ini. Berikut diantaranya:

Daftar Web Penyedia AJAX Loading Gif Image Generator

• Preloaders

• Ajaxload

• Chimply

• Web Script Lab

• Load Info

Cara menggunakannya cukup mudah koq Sob, setelah mendapat kodenya silahkan ganti kode url yang saya tandai warna merah di atas.