Selasa, 01 April 2014

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 Anda 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 Anda dibuat di kode CSS diatas

<div class="fbloading">
     <div></div>
     <div></div>
     <div></div>
</div>

Bagaimana tertarik untuk membuat loading facebook ini di blog Anda? Silahkan dan semoga bermanfaat

CSS: Membuat Loading Facebook di Blog Rating: 4.5 Diposkan Oleh: ana sriwahyuni

6 komentar:

  1. perlu di coba nih, terima kasih ilmunya

    BalasHapus
  2. keren.. ada plugin baru...
    saya coba ya mbak...

    BalasHapus
    Balasan
    1. tutorial lama tapi masih jarang yang update mbak dan juga banyak tutorial yang tidak work, ya saya ambil yang ini aj untuk d repost..
      silahkan mbak Cici :)

      Hapus
  3. kode ini dipasang di mana mba ana





    BalasHapus
    Balasan
    1. hayooo dibaca lagi mas Sinaga, udah jelas kok penjelasannya :)

      Hapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia