Kali ini, saya punya tutorial tentang memberikan efek loading Keren pada blog seperti pada blog saya. Adapun caranya yakni :
1. Log in ke blog sobat
2. Pilih Template
3. Untuk berjaga-jaga jangan sampai terjadi kesalahan, Download Full Template anda terlebih dahulu
4. Next, pilih EDIT HTML
5. Kemudian centang Expand Widget Templates
6. Cari code ]]></b:skin> dapat menggunakan CTRL+F atau F3 untuk memudahkan pencarian
7. Letakkan code di bawah ini, di atas code ]]></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); }}
8. Lihat code di bawah ini, Bila pada template anda sudah terdapat kode berwarnah merah
seperti di bawah versi berapa saja maka tidak perlu di tambahkan lagi
dan kalau belum ada, letakkan code di bawah ini tepat di atas code //<![CDATA[
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
9. Selanjutnya search code
</body> dan letakkan code di bawah ini, tepat di atas code
</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>
10. Save template dan lihat hasilnya
Sekian dari saya. Semoga Bermanfaat
Title : Memberikan Efek Loading Keren Di BLog
Description : Kali ini, saya punya tutorial tentang memberikan efek loading Keren pada blog seperti pada blog saya. Adapun caranya yakni : 1. ...