Baiklah sobat pada saat postingan ini di publish adalah suasana menjelang natal dan tahun baru, dan untuk menyesuaikan dengan suasana saat ini maka saya bagikan widget dan efek loading yang bisa kamu pasang di Blog Blogger.

Berikut ini adalah widget pohon natal sederhana dan efek loading blog santa claus yang bisa di pasang di Blogspot Blogger. Pada demonya juga kamu bisa melihat efek salju berjatuhan dan Animasi Pure Css Merry Cristmas. Ok tertarik? Cekidot...

Christmas tree widget for Blogger

Christmas tree widget for Blogger

Untuk membuatnya kamu cukup memasukan kode dibawah ini ke dalama widget HTML/JavaScript di Blog Blogger kamu.
<style>
.pohon-natal {margin:0;padding:0;text-align:center;position:fixed;bottom:3px;left:3px;z-index:9999;}
</style>
<div class="pohon-natal">
<a href="http://www.seocips.com/2015/12/christmas-tree-widget-and-santa-claus-loader-widget-for-Blogger.html" ><img src="http://4.bp.blogspot.com/-f-514olpdUk/Vl6QWdw99ZI/AAAAAAAAFwE/Zi2CW4eAPBs/s230/animated-christmas-tree-seocips.gif" title="animated christmas tree seocips" alt="animated christmas tree seocips" /></a>
</div>
Save Widget

Santa Claus Loading Blog

Santa Claus Loading Blog

Untuk membuatnya, letakan kode dibawah ini diatas </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/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:#fff; }
.seocips { position:absolute; width:100%;  margin:0 auto; text-align:center; padding:200px 0; color:#de2f32; font-family:Verdana; font-size:1.5em; }
.seocips span { animation:crecer 3s infinite; }
.seocips span:nth-child(2) { animation-delay:0.37s; }
.seocips span:nth-child(3) { animation-delay:0.74s; }
.seocips span:nth-child(4) { animation-delay:1.11s; }
.seocips span:nth-child(5) { animation-delay:1.48s; }
.seocips span:nth-child(6) { animation-delay:1.85s; }
.seocips span:nth-child(7) { animation-delay:2.22s; }
.seocips span:nth-child(8) { animation-delay:2.59s; }
.seocips img { border-radius:20px; padding:5px; }
@keyframes crecer {
    0% { font-size:1em; } 50% { font-size:1.8em; } 100% { font-size:1em; }}
</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. Selanjutnya letakan kode dibawah ini dibawah <body>
<div id="load-page-seocips">
<div class="seocips">
  <img src="http://1.bp.blogspot.com/-qP1QWr9YNFc/Vl6b7G4ml4I/AAAAAAAAFwU/pzbqgG4N9Ls/s1600/santaclaus-loading-animation.GIF"><br>
  <span>L</span>
  <span>O</span>
  <span>A</span>
  <span>D</span>
  <span>I</span>
  <span>N</span>
  <span>G</span>
</div>
  </div>
Save template

Pure Css Merry Christmas (ComingSoon)

Pure Css Merry Christmas

Merry Christmas Sound Effect

Untuk membuat efek suara  "Merry Christmas" kamu cukup memasukan kode dibawah ini ke dalam widget HTML/JavaScript di Blog Blogger kamu.
<div style="display:none;">
<audio controls autoplay>
<source src="https://sites.google.com/site/socipshotmusic/musicdjseocips/Seocips-Merry-Christmas.mp3" />
</audio>
</div>
Save widget.

Snow Effect

Untuk menambahkan efek salju tambahkan/masukan kode dibawah kedalam template blog atau bisa juga kedalam widget HTML/JavaScript.
<script src="https://cdn.rawgit.com/Brando07/share/newbe/efek-salju-seocips.js" type="text/javascript"></script>
Save widget.


Nah sekian selamat menggunakan bagi kamu yang ingin menggunakannya. Semoga bermanfaat.
7 Komentar untuk "Christmas tree, Santa Claus Loading and other Christmas widgets for Blogger"

keren banget...request donk bikinin countdown timer buat natal...thanks..GBU

nanti membuat loading blog lambat gak mas ?

Wah bingung juga saya, mungkin di coba saja yah mas, tergantung penilaian mas aja :)

kalau saya lihat se... itu ringan untuk di gunakan..