Sudah lama saya tidak posting tentang tutorial blogspot ya hehee. Oke pada kesempatan kali ini saya akan share yaitu tentang "Cara Membuat Efek Loading Dengan Animasi". Cara kerjanya ini pada saat kita mengklik suatu halaman di blog, maka efek ini akan muncul selama loading. Penasaran ? Yoda silahkan coba ya..

• Pertama masuk ke Edit HTML
• Lalu cari kode ]]></b:skin>
• Kemudian pastekan kode dibawah ini diatas kode ]]></b:skin>

/* Efek Loading Animasi */

#pageLoadaka {
position: fixed;top:0;left:0;background-color:6f0f60; z-index: 9999;text-align:center;
width:100%;height:100%;padding-top:22%;font-size:25px;color:#e20000;display:none;}
.loader {
background-color:rgba(0,0,0,0);
border:5px solid #a9a9a9;
opacity:.9;
border-right:5px solid #f90;
border-left:5px solid #f90;
border-radius:60px;
box-shadow:0 0 35px #a9a9a9;-moz-box-shadow:0 0 35px #a9a9a9;-webkit-box-shadow:0 0 35px #a9a9a9;
width:100px;
height:100px;
margin:0 auto;
-moz-animation:berputar 1s infinite ease-in-out;
-webkit-animation:berputar 1s infinite linear;
}

.loader3 {
background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg56ngZv0XIHCq2PGjOcz91eZ-jcHtMvRdF6NAzLc-K7Cqznci1iuU2q-lQ_cmWT8xMVpkeSgUIfBxSq1gHdmR5cVuQijxZBvbDw9GOSXQ1trtM3ROvG2kzQ4qay1TDz3JaQClydpkQ1Qgn/s1600/cyrle.png) no-repeat center;
background-repeat: no-repeat
border:2px solid #a9a9a9;
opacity:.9;
border-radius:45px;
box-shadow:0 0 35px #f90;-moz-box-shadow:0 0 35px #f90;-webkit-box-shadow:0 0 35px #f90;
width:70px;
height:70px;
margin:0 auto;
position:relative;
top:-181px;
}
.loader2 {
background-color: rgba(0,0,0,0);
border:5px solid #a9a9a9;
opacity:.9;
border-left:5px solid #f90;
border-right:5px solid #f90;
border-radius:50px;
box-shadow:0 0 40px #1b9111;-moz-box-shadow:0 0 40px #1b8111;-webkit-box-shadow:0 0 40px #1b8111;
width:80px;
height:80px;
margin:0 auto;
position:relative;
top:-100px;
animation:berputarkecil 1s infinite linear;
-moz-animation:berputarkecil 1s infinite linear;
-webkit-animation:berputarkecil 1s infinite linear;
}
@-moz-keyframes berputar {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 2px #f90;}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes berputarkecil {
0% { -moz-transform:rotate(360deg); }
100% { -moz-transform:rotate(0deg);  }
}
@-webkit-keyframes berputar {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 2px #f90; }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes berputarkecil{
0% { -webkit-transform:rotate(360deg); }
100% { -webkit-transform:rotate(0deg); }
}

•  Kemudian pastekan lagi kode dibawah ini tepat diatas kode </body>

 <!-- Start pageloader -->
<div id='pageLoadaka'>
<div class='loader'/>
<div class='loader2'/>
<div class='loader3'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    var siteURL = "http://" + top.location.host.toString();
    var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");
    $internalLinks.click(function() {
        $('#pageLoadaka').fadeIn(500).delay(2000).fadeOut(1200);
    });
    $('#pageLoadaka').click(function() {
        $(this).hide();
    });
});
//]]>
</script>
<!-- End pageloader -->