Aku mau kasi Cara Membuat Animasi Loading setiap Klik diblog yang aku dapet dari blog djadisaputra. Disitu aku liat blognya keren juga, tiap aku ngklik ada animasi loadingnya. Jadi aku penasaran nyari kodenya, ternyata disitu udah ada scriptnya. Sekarang aku mau posting kekalian semua sapa tau bermanfaat buat kalian. Oke deh simak aja ya Cara Membuat Animasi Loading setiap Klik diblog.
1. Kalian musti masuk dasbor blogger kalian. Kalian masuk ke template kalian, terus edit html.
2. Kalian cari kode ]]></b:skin> pake Ctrl +F biar cepet. Terus copy kode dibawah ini dan letakan diatas kode ]]></b:skin>
3. Kalian cari kode </head> terus taruh kode dibawah ini diatas kode </head>
#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); }}
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>4. Yang terakhir copy kode dibawah ini terus taruh diatas kode </body>
5. Simpan template kalian.
<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>
*info
Pemasangan animasi loading ini akan memberatkan proses loading blog anda. Jadi saya sarankan untuk memikirkan lagi pemasangan ini
Tata Cara Berkomentar yang Baik dan Benar :
1. Gunakan Bahasa yang Sopan.
2. Biasakanlah berkomentar sebelum meninggalkan.
3. Usahakan jangan menggunakan anonymous
4. Saya sangat berterima kasih atas komentar yang kalian berikan
5. Admin selalu berusaha melakukan yang terbaik untuk para pengunjung ConversionConversion EmoticonEmoticon