Cara Membuat Gambar Bergoyang Di Posting Blog

January 14, 2013 Media2give Tutorial Blog 11

loading...
Pernahkah kalian mengira bahwa gambar di postingan blog kalian bisa bergoyang secara otomatis ? Kalau belum,disini saya akan mencoba berbagi tips bagaimana caranya agar gambar di posting blog bisa bergoyang.Trik ini cukup unik,karena tidak banyak yang tahu dan memakainnya diblog,jadi kalau kalian membaca tips ini,berarti kalian beruntung karena menemukan informasi yang unik tentang Gambar Bergoyang Di Posting Blog.Jika cara ini dipasang di blog,pasti saya jamin pengunjung blog akan tertarik melihat-lihat halaman blog kalian,kadang ada yang heran juga lho..hehe.

Related Posts:

preview hasilnya bisa dilihat disini

Ok,langsung saja untuk Cara Membuat Gambar Bergoyang Di Posting Blog silahkan ikuti langkah-langkah berikut ini :

1. Log in Blog
2. Masuk ke rancangan > template >edit html
3. Ceklist tulisan “expand widget”
4. Cari kode ]]></b:skin>,agar lebih mudah mencarinya gunakan ctrl+F
5. Masukkan kode dibawah ini tepat diatas kode ]]></b:skin> tadi :

/* Efek getar by andi-techno.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); }
}

6. Lalu cari kode </body> dan paste kode dibawah ini tepat diatas kode </body> tadi dan  
    kemudian klik simpan


<script src=’http://x-gen.googlecode.com/files/x-gengetar.js’ type=’text/javascript’/>

sumber : http://andi-techno.blogspot.com/2012/09/membuat-gambar-bergetar-disetiap.html

11 Comments

Leave a Reply

Your email address will not be published.


*