Membuat Gambar Bergetar Disetiap Artikel - Trik Blogger

Oke sob, pada Tutorial Blog kali ini Andi-Techno akan menjelaskan bagaimana cara membuat gambar disetiap posting bergetar , 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

Membuat Gambar Bergetar Disetiap Artikel :

Disini saya menggunakan blogger dengan tampilan lama / versi lawas

1. Buka dashbord blogger, lalu klik Rancangan > Edit HTML
2. Cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah, lalu pastekan / letakkan 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); }
}

3. Cari kode </body> lalu pastekan / letakkan kode dibawah ini tepat diatas kode </body>

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

4. Simpan Template, lalu lihat salah satu artikel pada blog kamu yang ada gambarnya, pasti bergetar :)

keyword: cara membuat gambar bergetar di blogger, membuat gambar pada artikel blog bergetar, membuat gambar bergetar otomatis di artikel blog, cara membuat gambar bergetar, membuat gambar disetiap posting bergetar