Cara Membuat Animasi Loading Blog Keren 2013

Membuat Animasi Loading - Animasi loading blog bisa memberikan efek manipulasi terhadap loading blog agar nampak lebih cepat, dan agar lebih keliatan cool . Tutorial ini saya dapatkan di blog nya Om Dayz. Cukup kereen memakai animasi Loading Blog ini apalagi jika Template Sobat bernuansa Dark,Wahh tambah kereeen pastinya. Sebelum ke tutorial nya mari kita liat dulu demonya dibawah ini.

Demo

Liat Demonya kemudian klik salah satu judul artikel disana,pastinya akan ada efek loading animasinya. Baiklah langsung saja y ??

Cara pemasangannya sebagai berikut :

1. Login ke akun blogger.com sobat
2. Pergi ke Template => Edit html
3. Cari kode ]]></b:skin> biar lebih mudah pencarian tekan ctrl+f
4. Jika udah ketemu,Copy kode dibawah ini lalu pastekan 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); }}

5. Kemudian Tambahkan JQuery di bawah ini diatas </head>,jika udah terdapat di template sobat,sobat bisa lewatkan cara ke lima ini.

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

6. Langkah terakhir terapkan script di bawah ini di atas tag </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>

7. Selesai dan lihatlah hasilnya..

Terima kasih Om Dayz