Rumah_Thalib-Halo sobat Thalib, jumpa lagi dengan saya di Blog yang sederhana ini. Pada kesempatan kali ini kita akan belajar kembali cara mengedit Blog atau Mendesain Blog agar terlohat lebih menarik. Pada artikel saya yang sebelumnya saya sudah menyampaikan kepada sobat Thalib cara membuat kotak script dalam postingan. Lihat selengkapnya disini tentang cara mendesain Blog agar terlihat menarik.
Cara ini sama saja seperti cara-cara yang sudah kita pelajari seblumnya, yaitu dengan cara mengedit pada HTML pada tema Blog. Namun peletakan kode yang berbeda pada HTML Blog. Efek bergoyang pada gambar dalam postingan Blog ini akan bekeerja atau berfungsi di semua browser, seperti IE, Chrome, Safari, Opera, Firefox dann lain-lain.
Dan cara ini pun sangat lah mudah sobat Thalib. Kamu hanya peerlu menaruh kode yang akan saya berikan pada Blog kamu. Dengan begitu, semua gambar yang ada di Blog kamu akan bergoyang. Sebenarrnya cara untuk membuat gambar bergoyang itu ada dua cara, cara pertama secara keseluruhan dan cara yang ke dua adalah cara yang khusus.
Tapi disini saya hanya akan memberikan cara yang Global saja. Sebenarnya Saya sudah lama sekali mencari artikel yang membahas tutorial ini, namun artikel tersebut sudah lawas dan tidak dapat bekerja seperti biasanya {alias tidak berfungsi lagi}. Tapi akhirnya saya pun menemukan artikel yang membahas cara ini. Dan ketika saya coba, hasilnya memuaskan.
Tapi sebelum ke langkah yang selanjutnya, perlu di ingat, bahwa kode ini akan bekerja hanya pada Blog yang tidak diterapkan anti Copas atau Klik kanan. Jadi, kalau Blog kamu masih menggunakan Kode anti Copas dan Klik kanan, maka Kode HTML yang saya berikan tidak akan bekerja.
Maka dari itu, kalau sobat masih ingin menerapkan cara ini ke dalam Blog kamu, sebaiknya hapus dulu script anti Copas dan Klik kanan yang ada di Blog kamu.
Baca Juga :
Oke sobat Thalib, Kalau Script Anti Copas dan Klik kanan di Blog kamu sudah tidak terpasang lagi, kita lanjut ke langkah-langkah yang berikut ini.
Cara Membuat Efek Bergoyang Pada Gambar Di Blog :
1. Login terlebihh dahulu ke akun Blogger kamu.
2. Masuk ke menu Tema ---> Edit HTML.
3. Cari kode yang bernama ]]></b:skin>. Untuk memudahkan dalam pencarian kode, gunakan CTRL+F.
4. Jika sudah ketemu kodenya, kemudian kamu tinggal masukan saja kode dibawah ini tepat diatas kode ]]></b:skin>
Kode Efek Shake Pada Gmabar Di Dalam Postingan Blog :
.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;}
]]></b:skin>
6. Lihat Blog Kamu.
7. Selesai.
Nah Sobat Thalib, itulah cara untuk membuat efek bergoyang pada postingan gambar di Blog. Sangat mudah dan simpel bukan? Kamu hanya perlu menaruh kode HTML yang sudah saya sediakan diatas ke dalam Blog kamu. Semoga bisa bermanfa'at buat sobat semua.
Jika ada yang masih belum paham atau kesulitan dalam menaruh kodenya, silahkan kamu komentar dibawah postingan ini. Dan jangan lupa share artikel ini kepada teman-teman kamu.