Cara Membuat Animasi Loading Blog Lebih Menarik

Cara Membuat Animasi Loading Blog Lebih Menarik

Langsung ke TKP aja ya gan, lagi males merangkai kata,,,

1.  Login ke akun blogger anda
2. Klik Template » edit HTML
3. Tambahkan kode CSS berikut di atas kode ]]></b:skin>

Animasi Loading Part, 1 Berwarna Merah

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

4. Kemudian tambahkan kode jquerty ini diatas kode </head>, jika dalam template kalian sudah terpasang jquerty maka tidak perlu lagi tambahab jquerty tersebut, agar proses efek loading lancar.

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

5. Dan langkah terakhir pasang kode di bawah ini  tepat di atas kode </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>

Kemudian Save Template anda

Go to link Download