Widget Spesial Untuk Natal

Hai Sobat, kali ini saya akan share " Widget Spesial Untuk Natas ". Cara ini cocok bagi anda yang ingin merayakan hari natal, tapi untuk blog anda sendiri.
Mau tau caranya... Langsung Ke Tutorialnya...

Widget Spesial Untuk Natal

Efek Loading Natal

1. Masuk Ke Beranda Blogger > Template > Edit HTML
2. Cari Kode ]]></b:skin> Atau </style> Untuk Mempermudah Pencarian Anda Dapat Tekan CTRL + F
3. Masukkan Kode Di Bawah Ini Di Atas Kode ]]></b:skin> Atau </style>

#cak-yit-load-santa { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhykDjz7HVqfJAFFZuycN3ra4frdgd9rIgXM2KE9VYC6-EqXL4OusLZKZJy22nmawNGiPE2iKI1NGsmYaQyaPJwsBPw3a9s8LVO_Sgt7Y1TejDlSMVvUZqiumVWKaoIWqaidn-TJGBsmoA/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); }
}

4. Cari Kode </head>, Letakkan Kode Di Bawah Ini Di Atas Kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="http://yourjavascript.com/161151912421/cak-yit-load-santa.js" type="text/javascript"></script>

Hapus Kode Yang Di Cetak Tebal Jika Sudah Punya
5. Cari Kode <body>, Letakkan Kode Di Bawah Ini Di Bawah Kode <body>

<div id="cak-yit-load-santa">
<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>

6. Klik Simpan

Sumber:http://www.ferdistyle.xyz

Widget Snow

1. Masuk Ke Beranda Blogger > Tata Letak > Tambahkan Widget > HTML/Javascript
2. Masukkan Kode Di Bawah Ini Ke Dalam Kotak

<style>.animasi-natal {margin:0;padding:0;text-align:center;position:fixed;bottom:3px;left:3px;z-index:9999;}</style>
<div class="animasi-natal"><a href="http://cak-yit.blogspot.com" target="_blank"><img height="200" width="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIiCoIvlVSx3S-9bjSJAp4TF1bYDh4lnxPtwcoPDEfDG733Xczy9OccWk-9GuPYNjPAp-yrbhqO8GBdxTqmPtR1wNnm9-PJqXarBuGm5uqQXWYDrn_9y066hVEZeosRFWNduoF5jLPmyBj/s1600/Pohon+Natal+-+Cak+Yit.gif" title="Animasi Pohon Natal - Cak Yit" alt="Animasi Pohon Natal - Cak Yit" /></a></div>
<script src="http://yourjavascript.com/255011126106/cak-yit-snowfall.js" type="text/javascript"></script>

3. Klik Simpan

Tag : Widget