Animasi Gambar Berayun Pada Blog

Dul Kenyot   08.05   Animasi, Css, Tutorial   14 comments  

sobat blogger, sebetulnya jika kita ingin membuat tampil blog milik kita menjadi lebih menarik dan atraktif ada banyak cara kok yang bisa kita lakukan, seperti membuat tombol yang beraneka ragam model, membuat slide pada halaman muka, dan masih banyak lagi.
Kali ini saya akn membagikan sebuah tutorial yang sedikit nyeleh sob... yaitu membuat animasi gambar pada halaman postingan menjadi seperti berayun (Animasi Gambar Berayun Pada Blog), seperti yang sobat lihat tadi sewaktu pertama kali masuk ke halaman ini images dibawah ini bergerek layak sebuah bingkai yg tergantung. Lihat juga Cara Membuat Tombol Cantik Disini
Untuk membuatnya diblog sobat gampang banget kok, yuk ikuti langkah2nya dibawah ini.
Dan yang lebih penting ini murni menggunakan css, jadi ga akan membuat loading blog sobat jadi lemot, satu lagi sob jangan berlebihan dalam merubah tampilan blog, mau cantik nanti malah jadi jelek, ok sob...

Catatan: Backup dulu Templatenya sebelum memulai semua langkah-langkah ini !

My Son M Aflah 

DEMO RELOAD HALAMAN INI DAN PERHATIKAN GAMBAR DIATAS

Cara Membuat Animasi Gambar Berayun Pada Blog

Langkah Ke-1: Masuk ke menu Template>>Edit HTML Tambahkan Javascript berikut sebelum kode </head> , jika sudah ada abaikan saja sob...

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Langkah Ke-2: Tambahkan kode css  dibawah ini sebelum kode </style>. atau kode
]]></b:skin>. Lalu Simpan Template Sobat.

 /* Animasi berayun */
.animasi {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode:both;}
.berayun {-webkit-transform-origin: top center;transform-origin: top center;-webkit-animation-name: berayun;animation-name:berayun;}
@-webkit-keyframes berayun {20% { -webkit-transform: rotate3d(0, 0, 1, 15deg);transform: rotate3d(0, 0, 1, 15deg);}40% {-webkit-transform: rotate3d(0, 0, 1, -10deg);transform: rotate3d(0, 0, 1, -10deg);} 60% {-webkit-transform: rotate3d(0, 0, 1, 5deg);transform: rotate3d(0, 0, 1, 5deg);}80% {-webkit-transform: rotate3d(0, 0, 1, -5deg);transform: rotate3d(0, 0, 1, -5deg);}100% {-webkit-transform: rotate3d(0, 0, 1, 0deg);  transform: rotate3d(0, 0, 1, 0deg);}}
@keyframes berayun {20% {-webkit-transform: rotate3d(0, 0, 1, 15deg);transform: rotate3d(0, 0, 1, 15deg);}40% {-webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg);}60% {-webkit-transform: rotate3d(0, 0, 1, 5deg);transform: rotate3d(0, 0, 1, 5deg);}80% {    -webkit-transform: rotate3d(0, 0, 1, -5deg);transform: rotate3d(0, 0, 1, -5deg);}100% {-webkit-transform: rotate3d(0, 0, 1, 0deg);transform: rotate3d(0, 0, 1, 0deg);}}
.option {text-align:center;-webkit-animation-duration: 3s;-webkit-animation-delay: 2s;-webkit-animation-iteration-count: 5;}

Langkah Ke-3:  Tambahkan kode HTML dibawah ini pada halaman postingan sobat

 <div class="option animasi berayun">GAMBAR SOBAT DISINI</div>   

Langkah Ke-4: Publikasikan Postingan sobat dan lihat hasilnya.

SELESAI ! Selamat mencoba.