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.
Salam Terbaik,
KangRushend.