Cara Membuat Gambar Bergetar Otomatis Di Blog

Halo sahabat blogger semua?. Pada kali ini saya share Cara Membuat Gambar Bergetar Otomatis Di Blog. kalau belum tau bagaimana itu gambar bergetar silahkan lihat contohnya klik disini. Nah sesuai dengan judulnya, trik gambar bergetar ini berfungsi terhadap setiap gambar pada setiap artikel, sehingga kamu tidak perlu lagi memasukkan kode satu persatu disetiap posting menarik bukan? Yuk coba membuatnya. Berikut ini adalah Cara Membuat Gambar Bergetar Otomatis Di Blog :
 Cara Membuat Gambar Bergetar Otomatis Di Blog, Putupunyablog
1. Pastinya anda sudah login ke akun blogger.
2. Template >> Edit Html >> Lanjutkan >> Centang pada "Expand Template Widget".
3. Tekan CTRL + F.
4. Copy dan Pastekan kode berikut ini tepat diatas kode ]]></b:skin>
/* Efek getar by putupunyablog.blogspot.com */
.post img {
animation-name: x-gengetar;
-moz-animation-name:  x-gengetar ;
-webkit-animation-name:  x-gengetar;
animation-duration: 0.8s;
-moz-animation-duration: 0.8s;
-webkit-animation-duration: 0.8s;
transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-webkit-transform-origin:50% 50%;
animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-timing-function: linear;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
@keyframes  x-gengetar  {
0% { transform: translate(2px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(0px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(2px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(2px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@-moz-keyframes  x-gengetar  {
0% { -moz-transform: translate(2px, 1px) rotate(0deg); }
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }
30% { -moz-transform: translate(0px, 2px) rotate(0deg); }
40% { -moz-transform: translate(1px, -1px) rotate(1deg); }
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }
90% { -moz-transform: translate(2px, 2px) rotate(0deg); }
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }
}
@-webkit-keyframes  x-gengetar  {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
5. Letakkan juga kode berikut ini tepat DIATAS kode </body>
<script src='http://x-gen.googlecode.com/files/x-gengetar.js' type='text/javascript'/>
6. Jangan lupa klik "Simpan Template" dan lihat salah satu postingan artikel anda yang berisikan gambar.
Selamat Mencoba

Baca Juga Artikel Dibawah Ini!



23 komentar:

  1. terima kasih sudah berbagi tutornya,,

    BalasHapus
  2. terima kasih sudah berbagi tipsnya,,semoga dapat bermanfaat

    BalasHapus
  3. info yang menarik,,terima kasih sudah berbagi

    BalasHapus
  4. untuk ontes SEO a-pg silahkan tanya sama agan https://www.facebook.com/Septialdo?fref=ts karna saya beli blog sama dia

    BalasHapus
  5. Wah keren juga nih, dibuat animasi bergerak :)

    BalasHapus
  6. wow informasi dan ilmu baru terima kasih sudah berbagi tutor :)

    BalasHapus
  7. oke gan dengan ini jelas kan saya tidak pernah mengadakan kontes SEO
    terima kasih

    BalasHapus
  8. makasiih gan .. sangat membantu saya

    BalasHapus

Silahkan Berkomentar. Dilarang Live Link. Tidak Memakai Verifikasi Kata. Berkomentarlah Dengan Sopan!.

Entri Populer

 
Copyright © 2012 - 2013 Putupunyablog | Powered by Blogger