Cara Membuat Animasi Loading Blog

Pada beberapa Blog ada yang memasang animasi loading ketika kita hendak membaca artikel di dalam nya, aku pikir itu sih lumayan menarik dan kali ini saya juga ingin memasang animasi loading tersebut, sambil mempraktekkan tutorial cara membuat animasi loading blog, sekalian membuat tulisan tutorialnya untuk saya jadikan arsip dalam blog kotak-kosong blogspot, selain saya sendiri yang memang suka pelupa, kali saja bisa bermanfaat untuk teman-teman yang lain, yang mungkin secara tidak sengaja atau nyasar mampir ke blog saya. walau awalnya nyasar tapi mudah-mudahan seterusnya akan betah berkunjung ke blog saya ini. hehehe....

Oke langsung saja mari kita praktekan cara membuat animasi loading blog

Login ke Blogger Anda
Masuk ke Menu Template
Pilih Edit HTML.
Lalu cari kode ]]></b:skin> (untuk mempermudah pencarian gunakan CTRL+F)

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); }}

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

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'/>