Archive Pages Design$type=blogging

Animasi Gambar Berayun Pada Blog

s obat blogger, sebetulnya jika kita ingin membuat tampil blog milik kita menjadi lebih menarik dan atraktif ada banyak cara kok yang bisa ...


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.

COMMENTS

BLOGGER: 13
Loading...
Nama

Animasi Blogger Button Css Javascript jQuery Sider Sosial Media Syntax Highlighter Template Tips Tutorial Windows 10
false
ltr
item
Simple Tutorial: Animasi Gambar Berayun Pada Blog
Animasi Gambar Berayun Pada Blog
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBNVDgDw4H1h81S60dUYJQdh-ELbSgIckCSQsiSpRo-eJb1oB8IuLl6-n69wfPkCHYL1jqAHR52FC6FHhO3-njKlPPY-RprqTv1QlOTo5-1de36QtELQfkUwbrpDOLZabrhNI32XpLtyVM/s400/Aflah-my-son.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBNVDgDw4H1h81S60dUYJQdh-ELbSgIckCSQsiSpRo-eJb1oB8IuLl6-n69wfPkCHYL1jqAHR52FC6FHhO3-njKlPPY-RprqTv1QlOTo5-1de36QtELQfkUwbrpDOLZabrhNI32XpLtyVM/s72-c/Aflah-my-son.jpg
Simple Tutorial
http://mirandahardy.blogspot.com/2015/08/animasi-gambar-berayun-pada-blog.html
http://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/
http://mirandahardy.blogspot.com/2015/08/animasi-gambar-berayun-pada-blog.html
true
4419251694985783704
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago