Cara Agar Gambar Blog Bergerak Ketika Disentuh

PayuBaco

Gambar bisa saja merupakan hal yang sangat penting dalam dunia blog, ini terjadi karna gambar tidak bisa dipisahkan dari sebuah postingan blog. Hal ini karena dengan adanya gambar membantu pembaca agar lebih memahami apa yang disampaikan oleh penulis. Pada kali ini saya akan memberikan tutorial bagaimana Cara Agar Gambar Blog Bergerak Ketika Disentuh, sebenarnya para mastah sudah banyak yang tau mengenai cara ini. Tapi karna Admin yakin masih banyak diluaran sana yang newbi (seperti Admin) belum terlalu mengerti bagaimana cara membuatnya itulah alasan Admin membagikan tutorial ini kepada sobat semuanya. Pada tutorial kali ini terdapat 2 Versi tutorial yang bisa diterapkan pada blog sobat, pertama semua gambar yang ada di blog akan bergerak ketika disentuh dan yang kedua hanya gambar pilihan saja yang akan bergerak saat disentuh. Baiklah tanpa panjang lebar, mari simak tutorial dibawah ini.

Cara Agar Gambar Blog Bergerak Ketika Disentuh (Semua Gambar)

  1. Silahkan sobat buka Blogger.
  2. Selanjutnya silahkan sobat klik Tema >> Edit HTML.
  3. Lalu letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>. 
    4. .post-body img{
  display: inherit;
  transform-origin: center center; }
img:hover img{ animation-play-state: running; }

@keyframes img {
  20% { transform: translate(-1px, -5px) rotate(2.5deg); }
  40% { transform: translate(5px, 1px) rotate(-2.5deg); }
  60% { transform: translate(-1px, -5px) rotate(2.5deg); }
  80% { transform: translate(5px, 1px) rotate(-2.5deg); }
  0%, 100% { transform: translate(0, 0) rotate(0); } }

img:hover{
  animation-name: img;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;}
  4. Terakhir silahkan sobat Simpan.

Cara Agar Gambar Blog Bergerak Ketika Disentuh (Gambar Tertentu)

  1. Silahkan sobat buka Blogger.
  2. Selanjutnya silahkan sobat klik Tema >> Edit HTML.
  3. Lalu letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>. 
    4. .motubablog{
  display: inherit;
  transform-origin: center center; }
.motubablog:hover .motubablog{ animation-play-state: running; }

@keyframes motubablog{
  20% { transform: translate(-1px, -5px) rotate(2.5deg); }
  40% { transform: translate(5px, 1px) rotate(-2.5deg); }
  60% { transform: translate(-1px, -5px) rotate(2.5deg); }
  80% { transform: translate(5px, 1px) rotate(-2.5deg); }
  0%, 100% { transform: translate(0, 0) rotate(0); } }

.motubablog:hover{
  animation-name: motubablog;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;}
  4. Simpan.
  5. Untuk menerapkan pada postingan blog silahkan sobat Masukkan Gambar pada postingan blog.
  6. Pastikan berada di Tampilan HTML bukan Tampilan Menulis.
  7. Tambahkan "class=motubablog" setelah kode <img, contoh penerapannya silahkan simak dibawah ini. 
    8. <img class="motubablog" border="0" data-original-height="564" data-original-width="278" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHo_B0efcTlKoRSy3nKdlIvhs43C7sdu5h3GrMzt_bMni_YL2VgwL5gCEo43uXNO3PPceMXKoUm5uO8W86os2Q9JbcHwIfRAkTBWvqXn0cSVrx6_e6-ID9UrcpTsswK8n_7AEA2fbXkhw/s400/tambah-lokasi-jam-wa-terbaru-+%25289%2529.png" width="196" />
  8. Teakhir silahkan Terbitkan Artikel dan gambar postingan tertentu sudah bisa bergerak.

Tutorial ini tidak berlaku pada blog yang memasang script anti copas dan script anti klik kanan.

Itulah tutorial cara agar gambar blog bergerak ketika disentuh, sobat juga bisa membaca artikel lainnya disini. Jika ada hal yang sobat bingungkan sobat bisa bertanya langsung dikolom komentar, Admin minta maaf jika ada kesalahan dalam penulisan artikel kali ini. Jangan lupa untuk membagikan artikel ini keteman-teman yang lain jika dirasa artikel ini bermanfaat, terima kasih dan sampai jumpa diartikel selanjutnya.