CARA MEMBUAT ANIMASI LOADING DI BLOG DENGAN MUDAH

January 23, 2021 - (Updated: January 09, 2023)

FERDI ANANDA

Assalamualaikum Wr.Wb.

Terimakasih sobat masih tetap bersama kami di blog ini.

Pada postingan kali ini saya ingin membagikan sebuah tuotrial yaiitu ' CARA MEMBUAT ANIMASI LOADING DI BLOG DENGAN MUDAH '

Menambahkan efek loading blog merupakan sebuah fitur yang unik dan keren untuk mempercantik tampilan blog sobat.

Hal tersebut betujuan agar blog yang ia punyai mempunyai suatu tampilan unik dan bisa dihafal oleh pengunjung setianya.

Okelah kita masuk saja ke tutoraialnya, silahkan ikuti tutorialnya berikut :

CARA MEMBUAT ANIMASI LOADING DI BLOG DENGAN MUDAH

Siapkan animasi loading nya dibeberapa website penyedia animasi loading dibawah ini,

http://www.ajaxload.info/

Jika sudah, silahkan sobat masukin ke halaman khusus album image/gambar. Untuk mendapatkan url animasinya.

1. Silahkan masuk ke dalam halaman utama blogger.

2. Buka menu Tema dan pilih Edit HTML.

3. Cari kode <b:skin/> lalu tempelkan kode css dibawah ini tepat DIATASNYA.

#loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url("https://2.bp.blogspot.com/-YIkNxVZ0j-g/WfpE8n_XOeI/AAAAAAAACQ4/5QLSs5eOhpUfqI5p9z6nUPPADuPjxJb5ACLcBGAs/s1600/800%2B%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;

Silahkan ganti url yang https://2.bp.blogspot.com/-YIkNxVZ0j-g/WfpE8n_XOeI/AAAAAAAACQ4/5QLSs5eOhpUfqI5p9z6nUPPADuPjxJb5ACLcBGAs/s1600/800%2B%25281%2529.gif, dengan url animasi yang anda miliki.

4. Lalu cari lagi kode <body> dan tempelkan kode html dibawah ini tepat DIBAWAHNYA.

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

5. Kemudian cari <body> dan tempelkan kode dibawah ini tepat DIATASNYA.

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

6. Simpan dan selesai.

Sobat baru saja mengikuti tutorial yang saya berikan diatas tadi, bagaimana? gampang bukan membuatnya?.

Silahkan share ke teman-teman sobat yang mau membuat efek animasi loading di blog.

Saya akhiri postingan ini dengan,

Wassalamualaikum Wr.Wb.