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 pemanis mark up apapun dan cuma memakai pengaruh murni CSS3 yang tidak akan terlalu kokoh kepada beban loading blog anda.
Efek ini akan melakukan pekerjaan pada dikala hadirin melaksanakan mouse over atau melaksanakan 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 mirip IE, Firefox, Chrome, Safari, Opera bahkan saya sudah menjajal melaksanakan 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 isyarat
4) Salin kemudian pastekan semua css dibawah ini tepat diatas isyarat tersebut
5) Klik Simpan
Sekarang coba lihat salah satu posting blog yang terdapat gambar atau foto maka pengaruh bergoyang pun akan mengiringinya pada dikala anda melaksanakan hover. Enjoy & Happy Coding!
Efek ini akan melakukan pekerjaan pada dikala hadirin melaksanakan mouse over atau melaksanakan 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 mirip IE, Firefox, Chrome, Safari, Opera bahkan saya sudah menjajal melaksanakan 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 isyarat
]]></b:skin>4) Salin kemudian pastekan semua css dibawah ini tepat diatas isyarat 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 dikala anda melaksanakan hover. Enjoy & Happy Coding!