Cara Menambahkan Animasi Loading Pada Website / Blog

Cara Menambahkan Animasi Loading Pada Halaman Website / Blog.

Cara menambahkan tanda loading pada blog cukup sederhana hanya dengan menggunakan gambar gif, sedikit kode CSS dan sedikit kode javascript saja.

Kenapa Harus Menambahkan Animasi Loading?

Alasanya sederhana, yakni selain sebagai keindahan, dengan menambahkan tanda loading pada blog juga dapat memberikan tanda kepada user anda bahwa konten sedang dimuat.

Apabila anda sebagai seorang publisher Google Adsense, maka dengan menambahkan loading bar juga meningkatkan potensi bahwa user tidak akan melewatkan untuk melihat iklan di blog anda.

Dengan menambahkan loading bar pada blog, maka setiap halaman di situs/blog anda akan terbuka sempurna sampai semua iklan tampil sebelum user dapat membacanya.

Langsung aja berikut langka-langkah menambahkan animasi loading pada halaman website atau blog anda.

1. Siapkan Gambar Gif

Dibawah ini ada beberapa gambar gif yang bisa anda gunakan langsung

Jika anda ingin menggunakan gambar lainnya, anda bisa download dari beberapa situs dibawah ini:

http://preloaders.net/
http://loading.io/
www.ajaxload.info
http://cssload.net/
http://www.loadinfo.net/

2. Upload Gambar Gif

Setelah memilih gambar gif yang akan anda gunakan, silahkan upload gambar tersebut ke layanan penyimpanan gambar mana saja bebas, asal bisa diakses.

Lebih mudah jika anda upload diblog anda sendiri kemudian copy link gambarnya.

3. Tambahkan kode CSS

Selanjutnya anda perlu menambahkan kode CSS untuk mengatur properti dari gambar gif anda seperti posisi adn lain-lain.

Silahkan copy kode CSS dibawah ini dan tambahkan didalam tag <style> atau tag <b:skin> (untuk platform Blogger)


#loader { 
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVdaHZtL8Eh135a3YzkOoxZoZmjkwp76BTW5dlQ6f6IZYJs-st8DR9Fb1Bsfxkmo-0d0ahrR-OLktkZ6hdoH7MVJ2JaLv7V7cA6YXZFJNHji4_m_UFdsYrTdbTeiZaDp9R6sTuvwAgtPPy/s1600/800+%25281%2529.gif") 50% 50% no-repeat rgb(255, 255, 255);
 opacity: 0.9; 
}
#loader p { 
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-top: 180px; 
}

untuk mengganti gambarnya, pada bagian background:url (' '); pada kode diatas ganti dengan url gambar yang anda gunakan.

4. Tambahkan Kode HTML

Selanjutnya silahkan tambahkan kode HTML dibawah ini tepat dibawah tag <body> pada file HTML blog/web anda.


<div id="loader">
<p>Loading...</p>
</div>

Anda bisa mengganti tulisan Loading... dengan kata apapun yang anda inginkan.

5. Tambahkan Javascript

Langkah terakhir ialah menambahkan sedikit kode Javascript.

Silahkan copy kode Javascript dibawah ini:


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
<script type='text/javascript'>
   $(window).load(function() {
      $( "#loader" ).hide();
   });
</script>

Letakkan kode Javascript ini sebelum tag </body> pada bagian bawah file html anda.

6. Klik Save/Simpan Template

Coba refresh halaman blog anda untuk memastikan Loading Bar Blog yang anda tambahkan sudah bekerja dengan benar.

Sekian Cara Menambahkan Loading Bar Pada Blog.

Semoga bermanfaat :)