cara Membuat Efek Loading Keren

Bagaimana kabar kalian di hari ini, 7 Agustus 2013 ? Semoga kabar Anda baik-baik saja dan masih tetap semangat menjelang hari Raya Idul Fitri besok ( akan menunggu konfirmasi dari sidang Isbat Pemerintah ). Namun, Saya berharap, Anda tidak dalam kondisi lemas, melainkan tetap dalam kondisi Ceria, karena saya akan membagikan tutorial bagaimana Membuat Efek Loading Keren di Blog, seperti yang telah saya pakai pada template saya ini.

Screen Shot dari Kang Rushend

Baiklah langsung saja, untuk membuka kembali semangat anda.

1. Login ke akun blogger Anda

2. Pilih Template kemudian Edit html

3. Cari kode ]]></b:skin> agar lebih mudah pencarian tekan CTRL+F

4. Jika sudah Anda ketemukan, Kopi kode dibawah ini lalu Pasta 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 letakkan JQuery ini tepat diatas </head>, jika udah terdapat di template Anda, Anda dapat melewati 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. Pilih simpan Template dan lihat hasilnya.

Mohon maaf, Kang Rushend tidak bisa menampilkan demonya, karena, Saya yakin, pasti Anda akan berhasil dalam menerapkan tutorial yang telah saya berikan ini. Demikian Tutorial Membuat Efek Loading Keren yang dapat Saya sampaikan.

Akhir kata jika artikel ini bermanfaat, saya mohon untuk membagikannya di Google Plus ( G+ ). Karena dengan berbagi hidup kita akan menjadi lebih indah dan bermanfaat bagi orang lain.Mohon maaf jika dalam penjabaran artikel ini, saya mempunyai kesalahan yang disengaja maupun tidak disengaja. Semoga artikel ini bermanfaat.