Cara Membuat Efek Bergerak Pada Link Di Postingan Blog
Rumah_Thalib-Halo sobat Thalib, jumpa dengan saya di Blog yang sederhana ini. Pada kesempatan kali kita akan belajar untuk membuat efek bergerak atau bergoyang pada link di Blog. Pada artikel saya yang sebelumnya, saya sudah menyampaikan cara membuat efek bergoyang pada postingan gambar di Blog, dan kali ini kita akan membahas cara membuat link yang bergoyang. Lihat selengkapnya cara membuat efek goyang pada postingan Blog disini.
Efek bergoyang pada link ini akan berfungsi atau berkerja jika link tersebut di sentuh atau di lewati oleh mouse pengunjung. Contoh : Arahkan Mouse Anda Disini!
Oke sob, kalau kamu sudah melihat hasil dari efek yang dipasang pada Link diatas, kita lanjut ke tutorialnya. Cara ini sedikit berbeda dengan cara-cara yang sudah saya berikan sebelumnya. Cara kali ini kita tidak perlu untuk mengedit Tema Blog di HTML, namun kita hanya perlu memasukan Script yang sudah saya taruh dibawah kedalam Layout/Tata Letak pada Blog kamu. Simak baik-baik langkah dibawah ini.
Baca Juga :
Cara Membuat Efek Goyang Pada Link Di Blog :
1. Seperti biasanya, kamu Login terlebih dahulu ke Blogger kamu.
2. Kemudian masuk ke menu Layout atau Tata Letak.
3. Tambahkan Gadget HTML/Javascript dimana saja. {Kamu bisa buat di bagian sidebar, footer atau yang lainnnya}.
4. Masukan kode Script dibawah ini ke bagian kolom konten yang sudah ditambahkan.
Copy-Paste code Script dibawah ini :
.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); } }