Cara Membuat Gambar Postingan Ber-background Image Animation


KURAZONE ~ Halo sahabat Kurazer, pada kesempatan kali ini kita akan belajar tentang "Cara Membuat Gambar Postingan Ber-background Image Animation", artikel ini merupakan artikel lanjutan dari artikel sebelumnya, yaitu : Cara Membuat Gambar Postingan Ber-background Gradient Animation.

Cara Membuat Gambar Postingan Ber-background Image Animation

1. Masuk ke Akun Blogger >> Pilih Tema >> Pilih Edit HTML
2. Copy kode CSS dibawah ini, lalu letakkan (paste) diatas kode ]]></b:skin>
.kurazonehh{
    background: #B2F1FF url(https://sites.google.com/site/sotazone/imghh.png);
    padding: 20px;
    -webkit-animation: loopnavbg-data-v-c423aec0 350s linear infinite;
    animation: loopnavbg-data-v-c423aec0 350s linear infinite;
    -webkit-animation: loopnavbg-data-v-c423aec0 350s linear infinite;
    animation: loopnavbg-data-v-c423aec0 350s linear infinite;
    animation: loopingbackg 350s linear infinite;
}
@-webkit-keyframes loopingbackg
  {to{background-position:0 -3e3px}}
@keyframes loopingbackg {to{background-position:0 -3e3px}}
3. Simpan template
4. Masuk ke Menu Postingan, lalu edit atau buat entri baru.
Untuk memanggil kode Image Animation nya tinggal menggunakan kode dibawah ini.

<div class="kurazonehh">
<center><img src="https://sites.google.com/site/sotazone/kurazone.png" /></center>
</div>

Hasilnya akan nampak seperti dibawah ini :


NOTE :

  1. Ganti warna background dengan mengubah kode yang telah ditandai.
  2. Ganti URL gambar dengan URL gambar milik kalian.
  3. Sisanya bisa kalian kembangkan sendiri.

*Ekstensi gambar bisa berupa JPG, PNG ataupun GIF
Selesai... gampang bangets kan..?!

Itulah informasi mengenai "Cara Membuat Gambar Postingan Ber-background Image Animation", selamat mencoba dan semoga bermanfaat. Goodluck !!

Contoh - Contoh Kreasi :













Lebih baru Lebih lama