Cara Membuat Animasi Loading Keren Pada Safelink Otomatis

Cara Membuat Animasi Loading Simpel 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
    Cara Membuat Animasi Loading Keren Pada Safelink Otomatis
  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
    Cara Membuat Animasi Loading Keren Pada Safelink Otomatis

  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.
Buka Komentar