Rabu, 16 April 2014

Memasang Animasi Loading Keren di Blogger

Published : 08.56 Author : rehaby_aby

Memasang Animasi Loading Keren di Blogger

by: REHABY SETIAWAN

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 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

<?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

semoga bermanfaat yah teman2 >>>>>>>>>>>>>

http://roronoa-aby.blogspot.com/

Rehaby - killua

Rabu, 16 April 2014