Kumpulan Trick Blog TErbaru

About

New Trick hayalah blog kecil yang mencoba untuk memberikan dan menyajikan trick dan tips tentang blog
Kamis, 31 Maret 2016

CSS: Membuat Loading Facebook di Blog

CSS: Membuat Loading Facebook di Blog adalah membuat animasi loading yang sama seperti yang ada di facebook. Membuat loading seperti facebook ini dengan menggunakan kode css sehingga di eidt sesuai dengan keinginan dan biasanya loading yang ada di facebook berada di pojok kanan atas dan akan keluar saat melakukan update status, baik status berupa artikel, gambar, dan video atau yang terlihat seperti gambar berikut ini

CSS: Membuat Loading Facebook di Blog

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
CSS: Membuat Loading Facebook di Blog

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@

TOP