Harap diingat bahwa dalam kode ini, anda harus memasangjquery 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
Maka agar Valid HTML5 ganti kode CSS diatas dengan kode CSS dibawah<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html><HTML>
#floatingCirclesG{Memasang di Blog
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}
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>
No comments:
Post a Comment