Ads Kiri Khusus Desktop

Membuat Efek Loading Lingkaran

Generating Link...

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
  • What is Linku?

    safelinku is the security website link or shortener url, you can make your own short link on Linku.ml for free

  • What is Shortener url?

    As the name implies, shortlink or is a short link. Usually these shortlinks are provided by most advertising-based companies, such as Linku.ml and much more. Shortlink own point to shorten a link or url, be it a download link or url to a particular website. For what? of course for easy to remember. For example, I have a link "http: //site*.com/profile.php? HGgyawewihjassd", now I ask, are you easy to memorize the url? there is a once read already memorized and also there are many times read not memorized. Now I try to shorten the url into Linku.ml/iuYS which is shorter and easier to know even though it is a bit complicated, you can customize the shortened url Shortlink or url shortener is very easy to use by its users, because you do not spend a bit, even you who get money.

Ads Kanan Khusus Desktop