Cara Membuat Effek Loading Blog Keren Dengan CSS Efek Transform

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 :)

Tweet