Pada Postingan ini saya akan membagikan efek untuk loading blog. jika kamu sudah bosan dengan efek-efek loading yang sudah dibagikan sebelumnya dan ingin menggantinya dengan yang baru, nah efek loading yang baru ini lumayan keren berikut adalah Juggling Loader Animation
Contoh
Langsung aja ya menuju tkp 1. Login ke blogger.
2. Pilih Template > Edit HTML
3. Cari kode </head> lalu letakkan kode script efek di atas kode </head>, gunakan fungsi Find dengan menekan tombol CTRL+F pada keyboard
4. berikut script-nya:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/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; }
.circle{animation:spin 3s linear infinite both; background:#bada55; border-radius:100vmax; /* margin:calc(50vh - 5vmin) calc(50vw - 1vmin); */
/* Half the longest viewport width minus half the width/height of the circle. */
margin:60vh calc(50vw - 1vmin); height:10vmin; position:absolute; width:10vmin}
.circle + .circle { animation:spin 3s linear 1s infinite both; background:#10aded; }
.circle + .circle + .circle { animation:spin 3s linear 2s infinite both; background:#a991e5; }
@keyframes spin {
0% { transform:rotate(360deg) translate(0vmax,-10vmax); } 50% { transform:rotate(180deg) translate(0vmax,0vmax); } 100% { transform:rotate(0deg) translate(0vmax,-10vmax); }
}
</style>Keterangan5. Letakan kode dibawah ini dibawah <body>
- 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">
<div class="loader">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
6.Terakhir klik Save Template.
Sekian Effect Loading Blog "Juggling Loader"Jika artikel ini bermanfaat, jangan lupa di komen dan di klik iklannya ya
Trimakasih atas kunjungannya, Selamat mencoba . Salam sukses
