Blog kalian loadingnya lama daripada menunggu hanya melihat halaman yang muncul satu persatu mending tambah dengan effect loading Juggling loader.
Dan tutorku akan share tutorial cara membuat effect loading lainnya yang keren untuk mempercantik blog kalian.
Simak baik-baik tutor berikut untuk mempercantik blog kalian.
1. Buka Blogger kalian
2. Pilih Template> Edit HTML
3. Letakan Di atas Kode </head>
<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/dimrem/cool/newbie/theril.js" type="text/javascript"></script>
<style>
#load-page-tutorku { 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>
Note: Jika kode yang diberi warna merah sudah ada di template kalian tidak perlu ditambahkan.lagi<script src="https://cdn.rawgit.com/dimrem/cool/newbie/theril.js" type="text/javascript"></script>
<style>
#load-page-tutorku { 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>
4. Letakan Kode berikut di bawah <body>
<div id="load-page-tutorku">
<div class="loader">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
5. Save dan lihat hasilnya<div class="loader">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
Demikian Cara Membuat Effect Loading di Blog (Juggling Loader Animation),Mudah bangetkan? Jangan lupa dishare juga ya supaya orang lain bisa tahu kali aja ada yang nyari hehe dan Next saya akan share Cara Membuat Effect Loading lainnya. Dan semoga Semoaga Bermanfaat bagi semuanya yang membaca.
Kok ane mentok di Loadingnya mulu yak
ReplyDeletecoba ulangi lagi kali aja ada yang gk kebaca
Delete