Tweet |
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 :
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 */5. Letakkan juga kode berikut ini tepat DIATAS kode </body>
.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); }
}
<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
terima kasih sudah berbagi tutornya,,
BalasHapusnice post,,terima kasih untuk infonya
BalasHapusterima kasih sudah berbagi tipsnya,,semoga dapat bermanfaat
BalasHapusinfo yang menarik,,terima kasih sudah berbagi
BalasHapusuntuk ontes SEO a-pg silahkan tanya sama agan https://www.facebook.com/Septialdo?fref=ts karna saya beli blog sama dia
BalasHapus@Asma Iya gan, Terima kasih juga sudah berkomentar ;)
BalasHapus@Jantung Koroner Iya gan, sama-sama :)
BalasHapus@Penyebab Stroke Iya gan, Terima kasih.
BalasHapus@Kista Ovarium Oke gan, sama-sama :)
BalasHapus@a-pg | aldo pusat gratis Owh, jadi blog a-pg dijual to.. oke gan,, trima kasih.
BalasHapusnice, kunbal sob cbs4rt.blogspom[dot]com
BalasHapusWah keren juga nih, dibuat animasi bergerak :)
BalasHapus@Zacky Newbie Fallen Oke sob.. langsung ke tkp.
BalasHapus@vmediakom Iya gan ;). trima kasih sudah berkomentar ;)
BalasHapussumber link aktif plis :D
BalasHapuswow informasi dan ilmu baru terima kasih sudah berbagi tutor :)
BalasHapus@Andi X-Gen Kenapa gan?..
BalasHapus@Chucqy'Art Iya, sama-sama...
BalasHapusnice post gan...
BalasHapus@cinta damai Oke gan, trima kasih.
BalasHapusoke gan dengan ini jelas kan saya tidak pernah mengadakan kontes SEO
BalasHapusterima kasih
@a-pg | aldo pusat gratis hehe.. iya gan, trima kasih juga..
BalasHapusmakasiih gan .. sangat membantu saya
BalasHapus