Pulse Loading Animation. Kamu dapat menambahkan efek loading page pada blog kamu, dengan menambahkan efek loading. Setiap pengunjung yang berpindah halaman akan melihat animasi loading yang kamu pasang.
Mungkin saja halaman blog kamu cukup berat untuk di muat, dari pada pengunjung jadi bosan menunggu element2 yang di load satu persatu, sebagai gantinya kamu bisa menambahkan "Pulse loading animation" ini.
Mungkin saja halaman blog kamu cukup berat untuk di muat, dari pada pengunjung jadi bosan menunggu element2 yang di load satu persatu, sebagai gantinya kamu bisa menambahkan "Pulse loading animation" ini.
Cara memasang Pulse Loading Animation di Blogger
1. Di Blog Bloger 😃
2. Pilih menu Template ➔ Edit HTML
 |
| Template - Edit HTML |
3. Letakan kode dibawah ini diatas
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>Note:
<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>
- Jika pada template sudah terpasang Jquery (warna merah) diatas, maka kode itu tidak usah dipasang lagi, atau ganti dengan Jquery versi terbaru.
- Jika tidak bisa di save, hapus kode penutup
</script> di kode diatas.
<div id="load-page-seocips">5. Save template dan selesai.
<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>
