Sebenarnya membuat loading facebook di blog ini tidak harus menggunakan kode css dan lebih baik menggunakan gambar yang beranimasi (.gif) JIKA jumlah kode css lebih besar daripada ukuran gambar tersebut
Loading Facebook Dengan Gambar
Loading Facebook Dengan CSS
Loading Facebook Dengan CSS
Dengan tampilan yang hampir sama, mana yang harus dipilih? Menggunakan css atau menggunakan gambar bergerak? Nah dari beberapa sumber yang saya baca, hanya di Crazy Egg yang bekerja dan di artikel ini saya memcoba menyamakan tampilan loading facebook ini agar sama dengan yang aslinya. Berikut cara membuat loading facebook di blog :
Salin kode CSS berikut ini diatas atau sebelum kode ]]></b:skin> Jika didalam template sobat menggunakan </style>, salin sebelum </style>
.fbloading div{
height:50px;
width:16px;
margin:10px auto;
display:inline-block;
background-color:#8b9dc0;
border:1px solid #8b9dc0;
-webkit-animation:fbloader 1s linear infinite;
-moz-animation:fbloader 1s linear infinite;
animation:fbloader 1s linear infinite;
-webkit-transform:scale(0.91);
-moz-transform:scale(0.91);transform:scale(0.91);
}
.fbloading div:nth-child(1){
-webkit-animation-delay:0.49s;
-moz-animation-delay:0.49s;animation-delay:0.49s;
}
.fbloading div:nth-child(2){
-webkit-animation-delay:0.62s;
-moz-animation-delay:0.62s;animation-delay:0.62s;
}
.fbloading div:nth-child(3){
-webkit-animation-delay:0.75s;
-moz-animation-delay:0.75s;animation-delay:0.75s;
}
@-webkit-keyframes fbloader{
0%{-webkit-transform:scale(1.2);opacity:0.1}
100%{-webkit-transform:scale(0.7);opacity:5}
}
@-moz-keyframes fbloader{
0%{-moz-transform:scale(1.2);opacity:0.1}
100%{-moz-transform:scale(0.7);opacity:5}
}
@keyframes fbloader{
0%{transform:scale(1.2);opacity:0.1}
100%{transform:scale(0.7);opacity:5}
}
Salin kode markup HTML berikut untuk memanggil kode loading facebook yang telah sobat dibuat di kode CSS diatas
<div class="fbloading">
<div></div>
<div></div>
<div></div>
</div>
Bagaimana tertarik untuk membuat loading facebook ini di blog sobat? Silahkan dan semoga bermanfaat
Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@