Cara Membuat Efek Getar di Semua Gambar Postingan

Cara Membuat Efek Getar di Semua Gambar Postingan

Cara Membuat Efek Getar di Semua Gambar Postingan Blogger

Coretancode.com - Pada artikel kali ini admin akan membahas seputar tutorial blogging yang lebih tepatnya yaitu Cara Membuat Efek Getar di Semua Gambar Postingan, tutorial ini terinspirasi dari blog Igniel yang merupakan salah satu panutan hampir seluruh blogger dalam mendesain blognya.

Mendesain tampilan blog merupakan salah satu hal yang sangat sering dilakukan oleh para blogger untuk mendapatkan tampilan yang unik, menarik, dan minimalis agar disukai banyak pengunjung.

Untuk menerapkannya, kalian hanya perlu sedikit menambahkan CSS ke dalam template yang anda  gunakan. Hanya membutuhkan waktu kurang dari 3 menit, tentu anda sudah bisa melihat hasilnya.

Buat kalian yang sudah penasaran, silahkan ikuti tutorial pemasangannya dibawah ini.

Cara Membuat Efek Getar Gambar di Blogger

  1. Pastikan anda sudah login ke Blogger.com
  2. Pada menu dashboard, silahkan pilih menu Template > Edit HTML
  3. Cari kode ]]></b:skin> dengan cara menggunakan CTRL+F di pintasan keyboard.
  4. Kemudian salin kode dibawah ini, dan letakkan sebelum kode pada (langkah no.3)
    .post-body a img{box-shadow: 0px 0x 6px rgba(0, 0, 0, 0, 5);
    border-radius:10px;}
    .post-body a img:hover{
    animation:ignielShake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform:translate3d(0, 0, 0);
    backface-visibility:hidden;
    perspective:1000px}
    @keyframes ignielShake{
    10%,90%{transform:translate3d(-1px,0,0)}
    20%,80%{transform:translate3d(2px,0,0)}
    30%,50%,70%{transform:translate3d(-4px,0,0)}
    40%,60%{transform:translate3d(4px, 0, 0)}}
    @-webkit-keyframes ignielShake{
    10%,90%{transform:translate3d(-1px,0,0)}
    20%,80%{transform:translate3d(2px,0,0)}
    30%,50%,70%{transform:translate3d(-4px,0,0)}
    40%,60%{transform:translate3d(4px,0,0)}}
  5. Save Template.
Perhatikan!
Untuk melihat hasilnya, silahkan pergi menuju artikel anda lalu arahkan mouse pada gambar yang ada.

Jika anda gagal menerapkannya atau mungkin ada pertanyaan, silahkan bisa ajukan melalui kolom komentar yang ada dibawah artikel ini.

Mungkin sekian dulu artikel dari Cara Membuat Efek Getar di Semua Gambar Postingan, semoga bisa bermanfaat untuk anda.
Terima kasih