Cara Membuat Animasi Loading Keren Pada Safelink Otomatis

Saifulah.id, Sambas - Beberapa waktu yang lalu saya membagikan Cara Membuat Safelink Otomatis di Blog Utama. Namun, safelink tersebut belum menggunakan animasi loading.

Ternyata banyak sekali yang tertarik dengan tampilan animasi loading yang saya buat. Untuk itu kali ini saya buatkan tutorial cara membuat Animasi Loading Simpel khusus untuk safelink.

Tapi sebelumnya, perlu diketahui bahwa animasi loading memiliki varian bentuk yang berbeda-beda. Jadi, sebelum kita memasangnya, pilih dulu jenis animasi sesuai selera.

BENTUK ANIMASI LOADING

Ada 12 bentuk animasi loading, yaitu:

1. Circle / Lingkaran
   
2. Dual Rings / Dua Cincin
   
3. Ring / Cincin
4. Hourglass / Jam Pasir
5. Heart / Hati
6. Facebook
7. Elipsis (Horizontal)
8. Grid (Kotak)
9. Spinner / Pemintal
10. Ripple / Gelombang
11. Roller (Menggulung)
12. Default (Standar)

PENERAPAN ANIMASI LOADING

Berikut cara memasang animasi loading pada safelink otomatis:

A. PEMASANGAN CSS

1. Kunjungi halaman Animasi Loading untuk mendapatkan kode CSS dan HTML
   1) Tekan TOOL
   2) Tekan Animasi Loading
   
   
   
2. Pilih Animasi Loading yang kamu sukai,
   1) Misal kita pilih animasi bentuk Circle
   2) Tekan tulisan CODE di bawah animasinya
   3) Maka akan muncul kotak yang berisi kode CSS dan HTML
   
   
   
3. Buka Dashboard Blogger
4. Klik Menu Theme / Tema
5. Lalu Tekan Edit HTML
6. Setelah itu, cari kode ]]></b:skin> supaya cepat gunakan Ctrl + F
7. Copy / Salin Code CSS yang ada di dalam kotak. INGAT! hanya kode CSS, tidak termasuk kode HTML ya
8. Letakkan kode CSS di atas ]]></b:skin>
9. Lalu Simpan

B. PEMASANGAN HTML

1. Buka halaman Safelink
2. Maka kamu akan menemukan kode seperti ini
   
   <div class='separator-text' style='text-align:center'>

   <div class='ads-top'>

   <!-- Isi Kode Adsense Anda --></div>

   <a class='button1' href='#golink'>Klik 2x untuk menuju link</a></div>

   <div class='separator-text'>

   <!-- Tulis Konten Artikel Anda Disini --></div>

   
   

   <div id='golink' class='separator' style='text-align:center'>

   <div id='ads-left' class='ads-left'>

   <!-- Isi Kode Adsense Anda --></div>

   <div class='safelink' dir='ltr' trbidi='on'>

   <div>

   <span id='daplong' class='button1'>Please Wait...</span></div>

   <script>var currentURL=location.href; var str = currentURL; var res = str.replace("https://www.saifullah.id/p/safelink.html?url=", ""); document.write('<button id="download" class="visit-link button1" onclick="changeLink();" style="display:none;">Menuju Link</button>')</script></div>
   

   <div id='ads-right' class='ads-right'>

   <!-- Isi Kode Adsense Anda --></div>

   </div>

   <div class='clear'>

   </div>
   
   
3. Hapus kode yang saya highlight warna kuning, lalu ganti dengan kode HTML yang ada di dalam kotak Animasi Loading
4. Publishkan. Maka safelink kamu akan memiliki animasi loading seperti yang saya punya.

Demikian Cara Membuat Animasi Loading Terbaru Pada Safelink Otomatis.