Monday, 14 January 2013

Share on :

Cara Membuat Gambar Bergoyang Di Posting Blog

Alternative Link : [ Click Here ... ]
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

<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

Cara Membuat Gambar Bergoyang Di Posting Blog
Reactions:

6 comments:

  1. wah gan klau copas sertakan sumbernya... ini kan dari http://andi-techno.blogspot.com/

    ReplyDelete
  2. @ Farhan Breaker
    skrng udh gan,cba liat lgi

    ReplyDelete
  3. lucu juga ni gambar bisa bergerak,.. terima kasih aatas infonya...

    ReplyDelete
  4. @ Rendra Wardhani
    di coba di blog sob,nanti blognya tmbh keren ^_^

    ReplyDelete

Silahkan berkomentar dengan sopan,tanpa ada unsur SARA dan tidak boleh pasang link aktif

Related Posts Plugin for WordPress, Blogger...