cara membuat efek animasi loading di blog

1. Masuk ke template
2. klik Edit html

Pasang CSS Animasi Loading
Taruh kode CSS berikut 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 #00a3ff;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 35px #00a3ff;
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 #00a3ff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #00a3ff;
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#00a3ff}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 #00a3ff} 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); }}

Pasang JQuery Terbaru
pasang script jquery 1.7.2 tepat di atas tag </head> atau kalau ada JQuery terbaru, silahkan pasang yang terbaru.

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

Pasang Script Loading Animasi
Letakkan kode berikut tepat di atas tag </body>

<div id='loadhalaman'>
<div class='loadball'/>
<div class='loadball-2'/>
</div>
<script type='text/javascript'>
$(function() {
    var siteURL = &quot;http://&quot; + top.location.host.toString();
    var $internalLinks = $(&quot;a[href^=&#39;&quot;+siteURL+&quot;&#39;], a[href^=&#39;/&#39;], a[href^=&#39;./&#39;], a[href^=&#39;../&#39;]&quot;);
    $internalLinks.click(function() {
        $(&#39;#loadhalaman&#39;).fadeIn(1500).delay(6000).fadeOut(1000);
    });

    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target=&#39;_blank&#39;
    $(&#39;#loadhalaman&#39;).click(function() {
        $(this).hide();
    });
});
</script>

Penyesuaian Warna

Tambahan dari Hack4rt, untuk yang ingin menyesuaikan warna loading nya dengan warna lain, karena Hack4rt memakai kode #00a3ff pada loading halaman. Jika ingin mengganti warna nya, lihat kode CSS loading halaman yang paling atas tadi dan ganti kode warna yang ditulis dengan warna birumuda dengan kode warna yang diinginkan.