Animasi Gambar Berayun Pada Blog - All Tutorial
News Update
Loading...

Sabtu, 15 Agustus 2015

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.

14 komentar

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

    BalasHapus
    Balasan
    1. ga pak... karena murni css... coba aja pak...

      Hapus
  2. 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 :)

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

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

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

    BalasHapus
  5. tadai sya sempet nyari demonya. ternyata reload aja ya.

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

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

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

    BalasHapus
    Balasan
    1. Sama-sama mbah Dinan.... salam sobat Blogger....

      Hapus


EmoticonEmoticon

Notification
This is just an example, you can fill it later with your own note.
Done