Cara Membuat Gambar Bergoyang Di Posting Blog ~ Media2give

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.

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

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

Anda Sekarang Sedang Baca Artikel Tentang Cara Membuat Gambar Bergoyang Di Posting Blog Anda Bisa Menemukan Artikel Cara Membuat Gambar Bergoyang Di Posting BlogSaya Ini, dengan url http://media2give.blogspot.com/2013/01/cara-membuat-gambar-bergoyang-di.html, Kamu Juga Boleh Menyebar Luaskan Artikel Ini Atau Mengcopy Paste Artikel Cara Membuat Gambar Bergoyang Di Posting Blog ini Jika Memang Berrmanfaat. Tapi Saya Harap Anda Jangan Lupa Menyertakan Link Cara Membuat Gambar Bergoyang Di Posting Blog Sumbernya. Thank's