Cara Memasang Efek Bergoyang Pada Gambar Disemua Postingan blog
Salah satunya adalah dengan cara memberikan efek animasi atau bergerak pada gambar dalam artikel blog. Efek bergoyang ini sudah banyak sekali digunakan oleh para blogger.
Karena dengan cara yang praktis dan tidak mengurangi kualitas SEO ini blog kamu akan mendapatkan berbagai keuntungan. Sebelum artikel ini ditulis, saya sudah pernah memberikan tutorial cara membuat efek bergerak pada link diblog.
Memasang efek bergoyang pada gambar ini sebenarnya tidaklah sulit. Kamu tidak perlu susah-susah belajar bahasa program terlebih dahulu. Karena disini saya akan berikan langkah-langkah secara detail dan rinci.
Efek bergoyang pada gambar ini akan berfungsi apabila ada cursor yang melewati gambar tersebut (kalau diakses menggunakan desktop). Atau gambar yang akan bergerak jika diklik (kalau diakses menggunakan mobile).
Untuk demonya kamu bisa klik atau mengarahkan cursor kamu ke gambar dibawah ini :
Gimana bro? asyikkan? kerenkan? Kalau mau, ikutin langkah-langkah dibawah ini.
Cara Memasang Efek Bergoyang Pada Gambar Di Postingan Blog
1. Masuk ke Daskbord blogger kamu.
2. Masuk ke menu Theme --> Edit HTML.
3. Kemudian copy dan pastekan kode dibawah ini tepat berada diatas ]]></b:skin>
.entry-content img { transition-duration:0.5s; transition-timing-function: ease; transition-delay:0s; -moz-transition-duration:0.5s; -moz-transition-timing-function:ease; -moz-transition-delay:0s; -webkit-transition-duration:0.5s; -webkit-transition-timing-function:ease; -webkit-transition-delay:0s; -o-transition-duration:0.5s; -o-transition-timing-function:ease; -o-transition-delay:0s; } .entry-content img:hover { animation-name: goyang; animation-duration: 0.8s; transform-origin:50% 50%; animation-iteration-count: infinite; animation-timing-function: linear; -moz-animation-name: goyang; -moz-animation-duration: 0.8s; -moz-transform-origin:50% 50%; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -webkit-animation-name: goyang; -webkit-animation-duration: 0.8s; -webkit-transform-origin:50% 50%; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } @keyframes goyang{ 0% { transform: translate(2px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(0px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(2px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(2px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } @-moz-keyframes goyang{ 0% { -moz-transform: translate(2px, 1px) rotate(0deg); } 10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -moz-transform: translate(-3px, 0px) rotate(1deg); } 30% { -moz-transform: translate(0px, 2px) rotate(0deg); } 40% { -moz-transform: translate(1px, -1px) rotate(1deg); } 50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -moz-transform: translate(-3px, 1px) rotate(0deg); } 70% { -moz-transform: translate(2px, 1px) rotate(-1deg); } 80% { -moz-transform: translate(-1px, -1px) rotate(1deg); } 90% { -moz-transform: translate(2px, 2px) rotate(0deg); } 100% { -moz-transform: translate(1px, -2px) rotate(-1deg); } } @-webkit-keyframes goyang{ 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } }4. Jika sudah klik simpan dan coba kamu publikasikan gambar ke dalam artikel kamu.
Cara ini menggunakan kode otomatis, yang artinya semua gambar yang ada di blog kamu akan ikut bergerak jika disentuh!
Itulah tutorial cara memasang efek bergerak pada semua gambar yang ada diartikel blog. Cara yang sangat simpel, mudah, ringkas dan banyak manfa'at pastinya!