Membuat Animasi Loading di Blog
Daftar Isi
Langkah-langkah untuk Membuat Animasi Loading di Blog.
Login ke blogger.comPilih Rancangan / Template, kemudian Edit HTML
Cari kode
]]></b:skin>
Jika sudah ketemu lalu letakan kode berikut diatas kode ]]></b:skin>
<style type="text/css">Jika sudah, Pasang JQuery Terbaru
#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 #00a3ff;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 35px #00a3ff;
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 #00a3ff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #00a3ff;
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#00a3ff;
}
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#00a3ff;
}
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);
};
}
</style>
Caranya cari kode
</head>
lalu letakan kode JQuery 1.8.3 di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
Langkah Terakhir, Cari kode
</body>
lalu letakan kode berikut diatas kode </body>
<div id='loadhalaman'>Kalau semuanya sudah diterapkan dengan benar langsung saja Save Template/Simpan Template.
<div class='loadball'/>
<div class='loadball-2'/>
</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);
});
$('#loadhalaman').click(function () {
$(this).hide();
});
});
</script>
Jika masih ada yang ingin ditanyakan silahkan berkomentar dikolom komentar yang sudah disediakan.
Sekian dari saya, Semoga artikel ini bermanfaat.