Cara Membuat Animasi Loading Blog

Hay sobat?
Wah gimana gitu rasanya nulis artikel diblog baru
XD..
Kali ini saya akan share Cara Membuat Animasi Loading Blog
Pengen tahu kan ??


Langsung saja dari step ke-1
1. Pergi ke Blogger 
2. Lalu masuk ke Dasbord
3. Pilih tombol TEMPLATE --> Edit HTML

4. Copas code CSS dibawah ini 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(240 ,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(240 ,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(240 ,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(240 ,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); }}

5. Pasang script animasi dibawah ini tepat di atas code </body>

<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</div>
<script type='text/javascript'>
$(function() {
    var siteURL = "http://" + top.location.host.toString();
    var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
    $internalLinks.click(function() {
        $('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
    });
    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
    $('#loadhalaman').click(function() {
        $(this).hide();
    });
});
</script> 

  Masih belum selesai nih sobat..

6. Pasang JQuery dibawah ini tepat di atas code </head>

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

NOTE" : Pada code CSS , Kamu ganti code yang berwarna merah dengan code warna mu sendiri.
Tapi kalo ga di ganti juga gakpapa , cuman hasil nya ntar warna merah persis kaya contoh nya

Gampang kan Tutorialnya,,,
Sekian dulu sobat.. XD
Sumber : Si mastah RAZEE48