Sebelumnya anda mungkin sudah menjajal memasang efek zoom otomatis pada semua gambar posting blog. Nah kali ini saya akan bikin pengaruh shake atau pengaruh bergoyang yang di implementasikan didalam gambar kiriman blogspot tanpa ada embel-embel mark up apapun dan cuma memakai pengaruh murni CSS3 yang tidak akan terlalu berefek kepada beban loading blog anda.
Efek ini akan melakukan pekerjaan pada saat hadirin mengerjakan mouse over atau mengerjakan hover baik itu kepada gambar yang mempunyai anchor link maupun gambar yang tidak memilikinya. Efek shake yang bikin gambar blog anda bergoyang ini akan melakukan pekerjaan pada semua browser seumpama IE, Firefox, Chrome, Safari, Opera bahkan saya sudah menjajal mengerjakan hover pada browser di perangkat android dan pengaruh inipun melakukan pekerjaan sungguh mulus tanpa ada kendala.
2) Klik Template kemudian back up
3) Klik edit tempalte kemudian cari kode
4) Salin kemudian pastekan semua css dibawah ini tepat diatas kode tersebut
5) Klik Simpan
Sekarang coba lihat salah satu posting blog yang terdapat gambar atau foto maka pengaruh bergoyang pun akan mengiringinya pada saat anda mengerjakan hover. Enjoy & Happy Coding!
Efek ini akan melakukan pekerjaan pada saat hadirin mengerjakan mouse over atau mengerjakan hover baik itu kepada gambar yang mempunyai anchor link maupun gambar yang tidak memilikinya. Efek shake yang bikin gambar blog anda bergoyang ini akan melakukan pekerjaan pada semua browser seumpama IE, Firefox, Chrome, Safari, Opera bahkan saya sudah menjajal mengerjakan hover pada browser di perangkat android dan pengaruh inipun melakukan pekerjaan sungguh mulus tanpa ada kendala.
Langkah-langkah bikin pengaruh bergoyang pada gambarb di blog:
1) Masuk ke dashboard saya blogger anda2) Klik Template kemudian back up
3) Klik edit tempalte kemudian cari kode
]]></b:skin>4) Salin kemudian pastekan semua css dibawah ini tepat diatas kode tersebut
Klik ganda untuk menyalin
.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); } } 5) Klik Simpan
Sekarang coba lihat salah satu posting blog yang terdapat gambar atau foto maka pengaruh bergoyang pun akan mengiringinya pada saat anda mengerjakan hover. Enjoy & Happy Coding!
Sumber https://henponterbaru.blogspot.com