Animasi loading page blog 3 warna bola bergerak loncat-loncatan. Cara
pemasangannya sobat mengarah pada konfigurasi Template, kemudian
pilih Edit HTML.
1. Pasang script Jquery berikut
di atas tag </head>,
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'
type='text/javascript'/>
Jika
sebelumnya telah ada pada blog sobat, lewat langkah ini.
2. Silahkan copy kode CSS berikut dan letakan di atas kode ]]></b:skin>,
2. Silahkan copy kode CSS berikut dan letakan di atas kode ]]></b:skin>,
/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
.bubblingG {
text-align: center;
width:100px;
height:63px;margin:10% auto;
}
.bubblingG span {
display: inline-block;
vertical-align: middle;
width: 13px;
height: 13px;
margin: 31px auto;
background: #7BFF00;
-moz-border-radius: 63px;
-moz-animation: bubblingG 0.6s infinite alternate;
-webkit-border-radius: 63px;
-webkit-animation: bubblingG 0.6s infinite alternate;
-ms-border-radius: 63px;
-ms-animation: bubblingG 0.6s infinite alternate;
-o-border-radius: 63px;
-o-animation: bubblingG 0.6s infinite alternate;
border-radius: 63px;
animation: bubblingG 0.6s infinite alternate;
}
#bubblingG_1 {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
#bubblingG_2 {
-moz-animation-delay: 0.18s;
-webkit-animation-delay: 0.18s;
-ms-animation-delay: 0.18s;
-o-animation-delay: 0.18s;
animation-delay: 0.18s;
}
#bubblingG_3 {
-moz-animation-delay: 0.36s;
-webkit-animation-delay: 0.36s;
-ms-animation-delay: 0.36s;
-o-animation-delay: 0.36s;
animation-delay: 0.36s;
}
@-moz-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-moz-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-moz-transform: translateY(-26px);
}
}
@-webkit-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-webkit-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-webkit-transform: translateY(-26px);
}
}
@-ms-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-ms-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-ms-transform: translateY(-26px);
}
}
@-o-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-o-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-o-transform: translateY(-26px);
}
}
@keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
transform: translateY(-26px);
}
}
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
.bubblingG {
text-align: center;
width:100px;
height:63px;margin:10% auto;
}
.bubblingG span {
display: inline-block;
vertical-align: middle;
width: 13px;
height: 13px;
margin: 31px auto;
background: #7BFF00;
-moz-border-radius: 63px;
-moz-animation: bubblingG 0.6s infinite alternate;
-webkit-border-radius: 63px;
-webkit-animation: bubblingG 0.6s infinite alternate;
-ms-border-radius: 63px;
-ms-animation: bubblingG 0.6s infinite alternate;
-o-border-radius: 63px;
-o-animation: bubblingG 0.6s infinite alternate;
border-radius: 63px;
animation: bubblingG 0.6s infinite alternate;
}
#bubblingG_1 {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
#bubblingG_2 {
-moz-animation-delay: 0.18s;
-webkit-animation-delay: 0.18s;
-ms-animation-delay: 0.18s;
-o-animation-delay: 0.18s;
animation-delay: 0.18s;
}
#bubblingG_3 {
-moz-animation-delay: 0.36s;
-webkit-animation-delay: 0.36s;
-ms-animation-delay: 0.36s;
-o-animation-delay: 0.36s;
animation-delay: 0.36s;
}
@-moz-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-moz-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-moz-transform: translateY(-26px);
}
}
@-webkit-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-webkit-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-webkit-transform: translateY(-26px);
}
}
@-ms-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-ms-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-ms-transform: translateY(-26px);
}
}
@-o-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-o-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-o-transform: translateY(-26px);
}
}
@keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
transform: translateY(-26px);
}
}
3. Pastekan
JavaScipt ini di bawah kode <body>,
<!-- Start
Andi-Techno.blogspot.com Loader -->
<script type='text/javascript'>
//<![CDATA[
$(function() {
setTimeout(function() {
$('#xgenloader-screen').fadeOut();
}, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div class="bubblingG">
<span id="bubblingG_1">
</span>
<span id="bubblingG_2">
</span>
<span id="bubblingG_3">
</span>
</div>
</div>
<!-- End Loader -->
<script type='text/javascript'>
//<![CDATA[
$(function() {
setTimeout(function() {
$('#xgenloader-screen').fadeOut();
}, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div class="bubblingG">
<span id="bubblingG_1">
</span>
<span id="bubblingG_2">
</span>
<span id="bubblingG_3">
</span>
</div>
</div>
<!-- End Loader -->
4. Pemasangan loading animasi blog selesai, klik Simpan Template.
Selamat
Mencoba.............
0 komentar:
Posting Komentar