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
Baca juga : Membuat Efek Loading Jam 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>
<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>
<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
Beri Komentar Tutup comment