Cara Membuat Animasi Loading Blog

Pengunjung Pitik Blog pasti sedikit penasaran, dengan penampakan yang ada di blog ini. Yaitu adanya animasi ketika loading halaman. Dalam artikel ini, Anda akan saya berikan tutorial tentang bagaimana cara membuat animasi loading blog tersebut. Ini berlaku tidak hanya untuk blog, tapi untuk semua web yang berbasis html.

Sebelumnya, apabila masih bingung, maksud dari tutorial ini apa? Silakan lihat gambar di bawah ini:

Gambar di atas, adalah contoh animasi loading blog yang akan saya ajarkan berikut ini. Caranya mudah sekali.

1. Login ke Blogger Anda
2. Masuk ke Menu Template
3. Pilih Edit HTML.
4. Lalu cari kode ]]></b:skin> (untuk mempermudah pencarian gunakan CTRL+F)
5. Silahkan Anda copy kode CSS loading halaman di bawah ini dulu dan paste tepat di atas kode ]]></b:skin>

   #loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
   .loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
   .loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
   @-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
   @-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg);  }}
   @-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
   @-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

6. Jika sudah, cari lagi kode </head>. Lalu masukkan script berikut tepat di atas </head>.

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> 

   Jika Blog kamu sudah terpasang JQuery, ya sudah tidak usah :D
7. Jika sudah, cari lagi kode </body>. Lalu masukkan kode berikut tepat di atas </body>.

   <div id='loadhalaman'><div class='loadball'></div><div class='loadball-2'></div></div><script src='http://cicak-script.googlecode.com/files/animasiBlog.js' type='text/javascript'/>

8. Simpan, dan lihat hasilnya! :D

Semoga bermanfaat, dan kalau ada bingung2, jangan ragu untuk tanya-tanya melalui kolom komentar di bawah