Membuat Efek Loading Blog dengan @KeyFrames


Indonesian InformationHari ini saatnya admin akan membuat tutorial cara memasang efek loading blog keren dengan CSS @keyframes, yang sebelumnya saya sudah pernah membahas cara membuat CSS Animation @Keyframes. namun kali ini kita akan menerapkannya pada saat halaman blog di muat, dan akan menimbulkan efek animation dengan smooth(halus) tanpa bantuan jQuery. jika kalian ingin memasangnya pada blog terutama pengguna blogger silahkan di simak tutorialnya.
  • Pertamax, masuk ke Edit HTML
  • Keduax, cari dengan ctrl+f tulis  ]]></b:skin>
  • Masukkan kode berikut di atas kode  ]]></b:skin>
    @keyframes myfirst { from{opacity:0;} to{opacity:10;} } @-moz-keyframes myfirst { from{opacity:0;} to{opacity:10;} } @-webkit-keyframes myfirst { from{opacity:0;} to{opacity:10;} } @keyframes { from{transform:translate(0px, 9000px)} to{transform:translate(0px, 0px)} } @-moz-keyframes { from{-moz-transform:translate(0px, 9000px)} to{-moz-transform:translate(0px, 0px)} } @-webkit-keyframes { from{-webkit-transform:translate(0px, 9000px)} to{-webkit-transform:translate(0px, 0px)} } #header-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;} #content-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;} #main-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;} #sidebar-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;} #nav {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;} h1,h2,h3,h4,h5,h6,a {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;} h1,h2,h3,h4,h5,h6,.post img {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 8s;}
SIMPAN TEMPLATE dan LIHAT HASILNYA!

Penjelasan
id-widgetAnimationTime Load
#header-wrappermyfirst5s
#content-wrappermyfirst5s
#main-wrappermyfirst5s
#sidebar-wrappermyfirst5s
ID-widget di atas hanya sebagian kalian bisa menambahkan dengan widget lain . Time load adalah lama loading saat animasi bekerja dengan waktu yang di tentukan . kalian bisa menggantinya sesuai keinginan.
cara menambahkan cukup simpan properti css berikut dan ganti #id-widget dengan id template anda.

Browser
BrowserAnimation
Firefox-moz-animation: myfirst 5s
Chrome-webkit-animation: myfirst 5s
Pada tabel browser pendung yang saya buat untuk browser Firefox dengan atribut -moz- dan
Chrome/safari dengan atribute -webkit- ,untuk browser Opera tinggal tambahkan awalan -o- jika animasi ini mendukung.

Postingan terkait:

13 Tanggapan untuk "Membuat Efek Loading Blog dengan @KeyFrames"

  1. Yordan Ghaliszth Dewangga Bagi" BASE Cheat LostSaga, AYODANCE , Software , Tips Tricks Blogger , Dll.

    Silahkan Check Di Sini ..
    http://ghalis-zone.blogspot.com/

    ^_^ Jangan Lupa Ya .. Comment + Follownya .. hehehe .. ^_^

    BalasHapus
  2. bang ian...tutornya krg jelas...membingungkan

    BalasHapus
    Balasan
    1. intinya, kamu tinggal masukkan aja code yg sudah saya berikan di atas tulisan ]]>

      lalu save!

      Hapus
  3. Bisa tolong dijelaskan apa itu @KeyFrames

    BalasHapus
  4. Makasih Gan


    http://tristmation.blogspot.com/

    BalasHapus
  5. ijin nyoba gann.. :D

    noikun.blogspot.com

    BalasHapus

> Jika Artikel ini Membantu , Silahkan tinggalkan Komentar Anda
> Jika ingin menuliskan Kode-kode blog , jangan sekali-kali menulisnya dengan lengkap , Karena kodenya tidak akan muncul.
> U Comment I Follow !!!
> (Comment Use Emoticons, Copy Paste this code example: 13 or the other to the column comments)
> "No Spam"
> Do not Forget Leave Your Comment Here ...
> I Highly Appreciate your comment. This blog has been Dofollow.
> Komentar yang masuk SPAM tidak saya hapus dan saya akan Follow (jika link ada)

Follow Blog ini jika ingin mendapatkan informasi paling update