Sponsor

Navigation

Membuat Efek Loading Lingkaran


Cara Membuat Efek Loading Circle Roll Di Blog - Fungsi dari Efek Loading Pada Blog ini tidak lain hanya untuk mengubah tampilan pada saat loading atau menambah efek loading dihalaman blog kita sehingga blog jadi terlihat lebih menarik

                    Membuat Efek Animasi Loading Pada Blog

Bagaimana Cara Membuat Efek Loading Circle Roll Di Blog?

Untuk PENERAPANnya kita bisa mengikuti langkah demi langkah di bawah ini 

  • Langkah pertama silahkan anda masuk pada akun blogger
  • Setelah masuk seret mouse anda pada bagian Template dan pilih Tombol Edit Html.
  • Pada halaman html silahkan cari kode </head> , dan terapkan kode dibawah ini tepat diatas kode </head> .
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/Brando07/share/newbe/new-seocips-LP.js" type="text/javascript"></script>
<style>
#load-page-seocips { width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000; overflow:hidden; text-align:center; background:#111; }
$circle-size:10vmin; * { box-sizing:border-box; position:relative; }
.loader { margin-top:250px; }
.circle { border-radius:100vmax; display:inline-block; height:20vmin; opacity:.5; width:20vmin; }
.pulse .circle { animation:pulse-1 800ms infinite ease-in-out alternate; margin:0 -4vmin; transform:scale(0); }
.two .circle { animation:pulse-1 800ms infinite ease-in-out alternate; margin:0 calc(0vw - 10vmin); position:absolute; transform:scale(0); }
.circle:nth-of-type(1) { background:#FF9800; }
.circle:nth-of-type(2) { background:#FFC107; animation-delay:100ms; }
.circle:nth-of-type(3) { background:#FFEB3B; animation-delay:200ms; }
.circle:nth-of-type(4) { background:#CDDC39; animation-delay:400ms; }
.circle:nth-of-type(5) { background:#8BC34A; animation-delay:500ms; }
.circle:nth-of-type(6) { background:#4CAF50; animation-delay:600ms; }
@keyframes pulse-1 {
    25% { transform:scale(0); } 100% { transform:scale(1); }
}
</style>
  • Untuk kode yang di blok dengan tulisan warna BIRU , tidak usah dipasang lagi pada blog anda, jika sebelumnya pada blog anda sudah terpasang kode tersebut
  • Jika pada akhir penyimpanan, ketika pengaturan tidak bisa di Simpan, silahkan anda hapus kode </script> .
  • Kemudian langkah selanjutnya, silahkan anda cari kode <body> , dan letakan script dibawah ini tepat dibawah kode <body> .
<div id="load-page-seocips">
<div class="loader pulse">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
  • Save dan selesai, sekarang lihat perubahannya pada blog
  • Semoga dapat bermanfaat
Share
Banner

Muhammad fikriansyah

Post A Comment:

5 comments:

  1. Bakal pengaruh ke SE google nggak kak?

    ReplyDelete
  2. Artikelnya menarik gan, ditunggu artikel berikutnya

    ReplyDelete
  3. keren artikelnya...
    tapi kan kayanya ngaruh ke seo ya?

    ReplyDelete
  4. Mantap gan... ane coba di blog ane yang satunya..

    ReplyDelete
  5. rasakan bermain secara online di AJOQQ
    min dp. 15ribu
    min wd. 15ribu
    coba daftar, main dan menangkan hingga ratusan juta
    jadilah pemenang di AJOQQ

    ReplyDelete

Pembaca yang baik selalu meninggalkan jejaknya,
Silahkan berkomentar dengan bahasa yang sopan ^_^
[ - ] Dilarang berkomentar menggunakan Live Link !!!
[ - ] Dilarang promosi disini !
[ - ] Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten !!!
[ - ] Dilarang menulis kata - kata kotor,sara,dan hal - hal yang berbau p*rn*
[ - ] Dilarang Bertanya jika tidak sesuai dengan postingan

===== SEKIAN DARI ADMIN TERIMA KASIH ^_^ =====