Cara Bikin Pengaruh Bergoyang Pada Gambar Posting Blog

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 aksesori mark up apapun dan cuma memakai pengaruh murni CSS3 yang tidak akan terlalu mempunyai pengaruh kepada beban loading blog anda.

Efek ini akan melakukan pekerjaan pada saat hadirin menjalankan mouse over atau menjalankan 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 menjalankan hover pada browser di perangkat android dan pengaruh inipun melakukan pekerjaan sungguh mulus tanpa ada kendala.
Demo

Sebelumnya anda mungkin sudah menjajal memasang Cara Menciptakan Efek Bergoyang Pada Gambar Posting Blog

Langkah-langkah bikin pengaruh bergoyang pada gambarb di blog:

1) Masuk ke dashboard saya blogger anda
2) 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 saat anda menjalankan hover. Enjoy & Happy Coding!


Sumber https://henponterbaru.blogspot.com/

Komentar

Posting Komentar

Postingan populer dari blog ini

Samsung Galaxy Note 5: Phablet Yang Dinantikan Para Fans!

Gambar
Empat tahun yang kemudian adalah permulaan sejarah Samsung Galaxy Note mulai diperkenalkan. Tidak memerlukan waktu lama, Galaxy Note sanggup menjawab semua pertanyaan dan cita-cita yang dibutuhkan para penggunanya. Apalagi kalau bukan suatu ponsel cerdas mutakhir dengan layar lebar layaknya suatu tablet yang dibekali S-pen yang sanggup menolong dan memudahkan penggunanya dikala melakukan pekerjaan dan beraktifitas. Kabar gembira yang tak cuma dinantikan para fans Galaxy Note. Pada hari Kamis 13 Agustus 2015 dalam suatu jadwal resmi Samsung Galaxy Unpacked 2015 yang berlokasi di Lincoln Center, New York, Samsung memperkenalkan penerus sebelumnya adalah Samsung Galaxy Note 5. Desain Galaxy Note 5 lebih mewah dan berkelas. Dengan dibekali layar 5,7 inch Quad HD Super AMOLED, bahan aluminium dan diameter 153.2 x 76.1 x 7.6mm memunculkan tampilannya kian bergaya. Lengkungan yang terdapat dibagain belakang akan bikin para pengguna lebih tenteram dikala memegang phablet yang berskala b
Baca selengkapnya

Cara Bikin Qr Code Di Android Secara Offline

Gambar
Barcode atau sering disebut juga dengan QR Code pasti sudah tidak abstrak lagi bagi anda. Banyak orang dan perusahaan mempergunakan QR code selaku salah satu cara yang sungguh efektif untuk dijadikan selaku salah satu bukti kapan suatu barang dibuat atau dipubliksikan dan dapat menjadi salah satu kriteria ISO bagi perusahhan yang menggunakannya. Dijaman yang serba mutakhir seumpama saat ini utamanya dengan banyaknya Smartphone dan Tablet Android dapat menjadi salah satu cara untuk menjalankan scan maupun bikin QR code sendiri untuk kepentingan dan aktifitas keseharian anda. Sebenarnya ada berbagai macam QR code tetapi untuk anda para pengguna perangkat android, anda akan biasa dihadapkan atau menyaksikan barcode dengan jenis QR code versi 1 dan 2 yang dapat menjalankan coding 1,167 angka (73 x 73 modul).  Terlepas dari sedikit pengenalan tersebut, untuk anda yang ingin bikin QR code sendiri entah untuk tujuan bisnis online atau untuk dicetak dan ditempelkan diproduk yang mau an
Baca selengkapnya

Cara Memperlihatkan Persentase Baterai Realme C1

Gambar
Cara memperlihatkan persentase baterai Oppo Realme C1. Smartphone modern besutan Oppo yang satu ini boleh dikatakan sungguh fenomenal, alasannya yakni merupakan dengan spesifikasi yang begitu glamor tetapi dibanderol dengan harga Rp1.599.000 di toko-toko Hp. Terlebih lagi harga flash sale pertama di Lazada bahkan harga Realme C1 di lazada hanya Rp 1.399.000. Admin pun selaku admin phonetekno juga tidak mau ketinggalan ingin menjajal Ponsel yang satu ini. Dengan sulit payah muter-muter di daerah admin di Tulungagung kota alasannya yakni merupakan semua toko Hp katanya barang habis lah, mesti Pre order lah dll argumentasi karyawan toko Hp, dan kesannya admin memperoleh Hp Realme C1 dengan harga Rp 1.599.000 di deket rumah admin di Tulungagung kota. Dan sekedar informasi bahwa Service center Realme untuk sementara digabungkan dengan service center oppo. Cara memperlihatkan persentase baterai Oppo Realme C1 Dengan spesifikasi dan desain yang begitu mewah, Realme C1 sukses men
Baca selengkapnya