Animasi Gambar Berayun Pada Blog


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
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.

Previous
Next Post »

14 komentar

Click here for komentar
15 Agustus 2015 11.39 ×

wih keren Pak, scriptnya apa ngaruh thdp loading blog gax pak ?

Reply
avatar
Antonius SP
admin
15 Agustus 2015 12.08 ×

ga pak... karena murni css... coba aja pak...

Reply
avatar
15 Agustus 2015 12.36 ×

tambah keren saja Pak Blog nya hehehe... nanti saya coba ah Animasi Gambar Berayun ayun nya, maklum saya seneng sekali klo ada gamba2 animasi di blog xixixi... ijin save kode nya ya pak :)

Reply
avatar
Saya Siapa
admin
16 Agustus 2015 04.12 ×

tadi dicoba, lucu juga :-bd
tapi blogku gak pake banyak gambar hehe

Reply
avatar
17 Agustus 2015 21.03 ×

mantap nih biar animasi gambarnya lebih kreatif dan bagus tentunya, boleh nih saya save dulu kodenya..

Reply
avatar
Mangs Aduls
admin
18 Agustus 2015 19.32 ×

tadai sya sempet nyari demonya. ternyata reload aja ya.

Reply
avatar
Desa Seibaru
admin
18 Agustus 2015 21.59 ×

wah bisa say coba nih kang. terimakasih dulu ah. gambar- gambarnya jadi mengayun

Reply
avatar
Mbah dinan
admin
19 Agustus 2015 10.26 ×

tuh gambar jadi muantab bisa bergayut kayak tgergantung...yang jelas lebih atraktif dengan efek animasinya...ok makasih gan

Reply
avatar
Antonius SP
admin
19 Agustus 2015 21.53 ×

Silahkan masbro Eka, sorry baru di bales masih di lapangan ini nyempetin aja pake lepi... hehehehee

Reply
avatar
Antonius SP
admin
19 Agustus 2015 21.54 ×

Hehehehh makasih sudah berkunjung mas....

Reply
avatar
Antonius SP
admin
19 Agustus 2015 21.55 ×

Silahkan mas... makasih atas komentarnya...

Reply
avatar
Antonius SP
admin
19 Agustus 2015 21.56 ×

Heheheh iya mang Aduls di Reload aja...

Reply
avatar
Antonius SP
admin
19 Agustus 2015 21.57 ×

Silahkan kang... semoga bisa diterapkan oh ya css nya akan berfungsi sangat dengan baik jika di lihat pake Chrome...

Reply
avatar
Antonius SP
admin
19 Agustus 2015 21.58 ×

Sama-sama mbah Dinan.... salam sobat Blogger....

Reply
avatar
Thanks for your comment
close