Sepertinya salah satu Widget Spesial Natal ini terlupakan di post sebelumnya, di Post sebelumnya saya telah membahas Widget Blog Spesial Natal, di dalam post tersebut berisi kumpulan Widget yang harus kalian pasang saat Natal, tetapi saya telah melupakan satu widget , yaitu Efek Loading Santa Claus, baiklah karena saya telah melupakannya :v , di post hari ini saya akan membahasnya
Langsung Saja, saya kasih tutorialnya
Efek Loading Santa Claus di Blog
1.Buka Blogger
2.Masuk ke Blog yang anda ingin pasang, lalu pilih Template dan klik Edit HTML
3.Cari kode </head> dan letakan kode dibawah ini diatasnya
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="https://googledrive.com/host/0B__SLW9IKWpvUjB4YjRtXzZIUDQ/masdeeons-santaclause-loading.js" type="text/javascript"></script>#masdeeons-santaclause-loading { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7oSokvEjBf_BMfroRyVFVyhGQNOKOpF2R46oHL0LXREKJaf5KJXZD1dV8P0twuRXLjqY2dsrHJDIzCKww-2yLgO-ckjcexuPcFrkHvfm29paS3ATrI1jiodsukw7XY-JqT7XeOYXuvDI/s320/village.gif) #00CCFF no-repeat center; width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000 }
.dots-container { padding:0; position:absolute; text-align:center; top:65%; width:100%; }
.dots { -webkit-animation:bounce 1.5s infinite linear; animation:bounce 1.5s infinite linear; background:#FFF; border-radius:50%; display:inline-block; height:20px; text-align:center; width:20px; }
.dots:nth-child(1) { -webkit-animation-delay:.2s; animation-delay:.2s; }
.dots:nth-child(2) { -webkit-animation-delay:.4s; animation-delay:.4s; }
.dots:nth-child(3) { -webkit-animation-delay:.6s; animation-delay:.6s; }
.dots:nth-child(4) { -webkit-animation-delay:.8s; animation-delay:.8s; }
.dots:nth-child(5) { -webkit-animation-delay:1s; animation-delay:1s; }
@-webkit-keyframes bounce {
0% { -webkit-transform:translateY(0); } 15% { -webkit-transform:translateY(-15px); } 30% { -webkit-transform:translateY(0); }
}
@keyframes bounce {
0% { transform:translateY(0); } 15% { transform:translateY(-15px); } 30% { transform:translateY(0); }
}<div id="masdeeons-santaclause-loading">
<div class="dots-container">
<div class="dots">
</div>
<div class="dots">
</div>
<div class="dots">
</div>
<div class="dots">
</div>
<div class="dots">
</div>
</div>
</div>Sumber Terkenal : www.ferdistyle.xyz
Spesial Thanks buat Ferdi Style yang telah membuat Widget ini dengan sepenuh hatinya :D
Cukup sekian dari post ini,semoga dapat menambah informasi bagi anda.
