Apakah anda pernah lihat efek blog yang menerapkan ajax, akan muncul loading berputar. Apakah anda pernah penasaran seperti begini, "Kode apa ya yang digunakan, jadi pingin " . Nah pertanyaan itu akan terjawab di postingan ini
Harap diingat bahwa dalam kode ini, anda harus memasang jquery di Blog
Langkah pertama yang harus selalu anda lakukan, backup template anda !!!
Saya tidak bertanggung jawab jika terjadi kerusakan pada template anda dikarenakan anda lupa membackup
Baiklah berikut langkah langkahnya
Memasang CSS
Pasang kode ini diatas
]]></b:skin>
Kode :
#floatingCirclesG{
position:relative;
width:128px;
height:128px;
-moz-transform:scale(0.6);
-webkit-transform:scale(0.6);
-ms-transform:scale(0.6);
-o-transform:scale(0.6);
transform:scale(0.6);
}
.f_circleG{
position:absolute;
background-color:#55C8EB;
height:23px;
width:23px;
-moz-border-radius:12px;
-moz-animation-name:f_fadeG;
-moz-animation-duration:0.48s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:12px;
-webkit-animation-name:f_fadeG;
-webkit-animation-duration:0.48s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:12px;
-ms-animation-name:f_fadeG;
-ms-animation-duration:0.48s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:12px;
-o-animation-name:f_fadeG;
-o-animation-duration:0.48s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:12px;
animation-name:f_fadeG;
animation-duration:0.48s;
animation-iteration-count:infinite;
animation-direction:linear;
}
#frotateG_01{
left:0;
top:52px;
-moz-animation-delay:0.18s;
-webkit-animation-delay:0.18s;
-ms-animation-delay:0.18s;
-o-animation-delay:0.18s;
animation-delay:0.18s;
}
#frotateG_02{
left:15px;
top:15px;
-moz-animation-delay:0.24s;
-webkit-animation-delay:0.24s;
-ms-animation-delay:0.24s;
-o-animation-delay:0.24s;
animation-delay:0.24s;
}
#frotateG_03{
left:52px;
top:0;
-moz-animation-delay:0.3s;
-webkit-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
animation-delay:0.3s;
}
#frotateG_04{
right:15px;
top:15px;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-ms-animation-delay:0.36s;
-o-animation-delay:0.36s;
animation-delay:0.36s;
}
#frotateG_05{
right:0;
top:52px;
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-ms-animation-delay:0.42s;
-o-animation-delay:0.42s;
animation-delay:0.42s;
}
#frotateG_06{
right:15px;
bottom:15px;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}
#frotateG_07{
left:52px;
bottom:0;
-moz-animation-delay:0.54s;
-webkit-animation-delay:0.54s;
-ms-animation-delay:0.54s;
-o-animation-delay:0.54s;
animation-delay:0.54s;
}
#frotateG_08{
left:15px;
bottom:15px;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-o-animation-delay:0.6s;
animation-delay:0.6s;
}
@-moz-keyframes f_fadeG{
0%{
background-color:#44B884}
100%{
background-color:#55C8EB}
}
@-webkit-keyframes f_fadeG{
0%{
background-color:#44B884}
100%{
background-color:#55C8EB}
}
@-ms-keyframes f_fadeG{
0%{
background-color:#44B884}
100%{
background-color:#55C8EB}
}
@-o-keyframes f_fadeG{
0%{
background-color:#44B884}
100%{
background-color:#55C8EB}
}
@keyframes f_fadeG{
0%{
background-color:#44B884}
100%{
background-color:#55C8EB}
Jika template anda adalah template HTML yang tandanya dipaling atas template terdapat kode
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
Maka agar Valid HTML5 ganti kode CSS diatas dengan kode CSS dibawah
#floatingCirclesG{
position:relative;
width:128px;
height:128px;
transform:scale(0.6);
}
.f_circleG{
position:absolute;
background-color:#55C8EB;
height:23px;
width:23px;
border-radius:12px;
animation-name:f_fadeG;
animation-duration:0.48s;
animation-iteration-count:infinite;
animation-direction:linear;
}
#frotateG_01{
left:0;
top:52px;
animation-delay:0.18s;
}
#frotateG_02{
left:15px;
top:15px;
animation-delay:0.24s;
}
#frotateG_03{
left:52px;
top:0;
animation-delay:0.3s;
}
#frotateG_04{
right:15px;
top:15px;
animation-delay:0.36s;
}
#frotateG_05{
right:0;
top:52px;
animation-delay:0.42s;
}
#frotateG_06{
right:15px;
bottom:15px;
animation-delay:0.48s;
}
#frotateG_07{
left:52px;
bottom:0;
animation-delay:0.54s;
}
#frotateG_08{
left:15px;
bottom:15px;
animation-delay:0.6s;
}
@keyframes f_fadeG{
0%{
background-color:#44B884}
100%{
background-color:#55C8EB}
Memasang di Blog
Setelah itu, pasang kode ini dimana saja, tapi saran saya dibawah <body>
<div id="floatingCirclesG">
<div class="f_circleG" id="frotateG_01">
</div>
<div class="f_circleG" id="frotateG_02">
</div>
<div class="f_circleG" id="frotateG_03">
</div>
<div class="f_circleG" id="frotateG_04">
</div>
<div class="f_circleG" id="frotateG_05">
</div>
<div class="f_circleG" id="frotateG_06">
</div>
<div class="f_circleG" id="frotateG_07">
</div>
<div class="f_circleG" id="frotateG_08">
</div>
</div>
Kalau sudah silahkan dicoba
Kalau gagal bisa menghubungi saya melalui komentar
Trims oke atas kunjungannya
Komentar
Posting Komentar
Komentar yang baik ya