Cara Membuat Effek Loading Blog Keren Dengan CSS Efek Transform

↑ Grab this Headline Animator

Cara Membuat Efek Loading Blog Keren Dengan CSS Efek Transform - 

hay sobat kali ini ilmu ane akan berbagi Trik blogger keren lagi , sangat indah bukan jika blog kalian mempunyai efek efek yang keren , misalnya efek Transform ini .

Cara kerja Loading ini ?

Efek Transform ini sangat keren sob , karna loading ini bisa di atur efek Transform nya sesuai aturan yang kita mau , kalau kemarin saya posting mengatur widget di halaman tertentu . Nah efek ini juga bisa di atur di bagian body saja atau di #sidebar-wrapper , #main-wrapper . 

Kerja Efek pada Blog ILMU ANE

Alasan blog ini tidak memakai efek ?
Blog ini di sengaja untuk tidak berat , agar kecepatan blog ini semakin cepat dan bikin nyaman pengunjung , saat ini blog ILMU ANE mempunyai Spesifikasi "

Beban 

59.54 KB

Speed

10.2 seconds

Dengan spesifikasi seperti itu saya sara udah cukup untuk speed Blog ini .
Tapi tenang saja , jika kalian ingin memasangnya pasang saja , asal blog kalian jangan sampai melebihi  >100 kb , itu berat dan bikin alexa cukup susah turun , bahkan bisa bengkak .

Berikut langkah - langkah pemasanganya :

1. Login Blogger

2. Pilih Template => Klik Edit HTML

3. Cari Kode ]]></b:skin> Supaya Mepercepat Pencarian guanakan CTRL+F

4. Kemudian Copy Paste Kode CSS di bawah ini tepat di atas ]]></b:skin>

 

<style type='text/css'>
    /* efek animasi halaman transform start */
    @-webkit-keyframes transform-translate{
      from{-webkit-transform:translate(0px,1000px)}
      to{-webkit-transform:translate(0px,0px)}
    }
    @-moz-keyframes transform-translate{
      from{-moz-transform:translate(0px,1000px)}
      to{-moz-transform:translate(0px,0px)}
    }
    @-ms-keyframes transform-translate{
      from{-ms-transform:translate(0px,1000px)}
      to{-ms-transform:translate(0px,0px)}
    }
    @-o-keyframes transform-translate{
      from{-o-transform:translate(0px,1000px)}
      to{-o-transform:translate(0px,0px)}
    }
    @keyframes transform-translate{
      from{transform:translate(0px,1000px)}
      to{transform:translate(0px,0px)}
    }
    /* efek animasi halaman transform end */
    /* implementasi pada element */
    body {
      -webkit-animation:transform-translate 5s;
      -moz-animation:transform-translate 5s;
      -ms-animation:transform-translate 5s;
      -o-animation:transform-translate 5s;
      animation:transform-translate 5s;
    }
    </style>

5. Selesai , Thanks semunaya , semoga bog kalian banyak semakin menarik 
   dan jadi banyak pengunjung setia :)

Dunia Aneh
Kumpulan Artikel Unik dan Aneh sepanjang Masa
Catatan dosen

Tips Android dan BBM
Kumpulan Ulasan tentang Tips Android dan BBM
Putera Dosen

Meme Lucu Banget
Kumpulan Meme Lucu yang lagi ngetren
Cds Blog

Kumpulan Artikel Menarik
Semua Artikel yang Kamu Cari Ada di sini
230 Penulis
Ads by BLOGGER

Posted by Very Handika

Tweet