CARA MEMBUAT EFEK BERGOYANG PADA GAMBAR ARTIKEL TEMPLATE BLOGGER CARA MEMBUAT EFEK BERGOYANG PADA GAMBAR ARTIKEL TEMPLATE BLOGGER - SUARA HARIAN OTO BEMO BERODA TIGA
Suara Harian Oto Bemo Beroda Tiga

Komunikasi, Media Ilmu & Pengetahuan Umum Blogging

Langsung ke konten utama

"OTO BEMO.. OTO BEMO.. BERODA TIGA .. TEMPAT BERHENTI.. DITENGAH TENGAH KOTA..PANGGIL NONA..PANGGIL NONA..NAIK KERETA..NONA BILANG..TIDAK PUNYA UANG.. JALAN KAKI SAJA"

CARA MEMBUAT EFEK BERGOYANG PADA GAMBAR ARTIKEL TEMPLATE BLOGGER

Sebelumnya anda mungkin mengalami menghidupkan lilin dimalam hari dalam keadaan gelap gulita, tampaklah api lilin tersebut bergoyang ditiup oleh angin itu sebagai gambaran api bergoyang adalah efek angin tak bisa membaca. Nah kali ini saya akan membuat pengaruh shake atau pengaruh bergoyang yang di implementasikan didalam gambar kiriman blogspot tanpa ada komplemen mark up apapun dan hanya menggunakan pengaruh murni CSS3 yang tidak akan terlalu kuat terhadap beban loading blog anda.

Efek ini akan bekerja pada saat pengunjung melakukan mouse over atau melakukan hover baik itu terhadap gambar yang mempunyai anchor link maupun gambar yang tidak memilikinya. Efek shake yang membuat gambar blog anda bergoyang ini akan bekerja pada semua browser mirip IE, Firefox, Chrome, Safari, Opera bahkan saya telah mencoba melakukan hover pada browser di perangkat android dan pengaruh inipun bekerja sangat mulus tanpa ada kendala.
 
Sebelumnya anda mungkin sudah mencoba memasang  Cara Menciptakan Efek Bergoyang Pada Gambar Posting Blog.
Langkah-langkah membuat pengaruh bergoyang pada gambar di blog:
1) Masuk ke dashboard blog anda
2) Klik Template control F
3) Klik edit tempalte kemudian cari aba-aba ]]></b:skin>
4) Salin kemudian pastekan semua scrift css dibawah ini tepat diatas aba-aba 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 melakukan hover. Enjoy & Happy Coding!
Sumber https://8tutorialandroid.blogspot.com/ Baca Juga : Pertimbangkan-dalam-membuat-logo


Bagaimana Reaksi Anda Tentang Artikel Ini?

Komentar

POPULAR POST

BIOGRAFI SYAIKH AHMAD BIN MUHAMMAD AT TIJANI AL HASANI RA

Biografi Syaikh; Sang ahli hakikat dan penutup Para wali : Sayyidi Abul Abbas Ahmad bin Muhammad At-Tijany Ra. Beliau adalah Sayyidi Abu Al Abbas Ahmad bin Muhammad bin Al Mukhtar bin Ahmad bin Muhammad bin Salim bin Al lid bin Salim bin Ahmad bin Ahmad bin Ali bin Abdullah bin Al Abbas bin Abd Al Jabbar bin Idris bin Ishaq bin All Zainal Abidin bin Ahmad bin Muhammad bin Hasan Al Mutsanna bin Al Hasan As-Sabt bin Ali bin Abi Thâlib, suami dan Fathimah Az-Zahra ; penghulunya wanita penghuni surga; yang juga merupakan putri Rasulullah Saw. Beliau termasuk keturunan Nabi yang mulia, pemilik Futuh Al Mubiin :  sossoknya memiliki kedudukan yang tinggi, sang wali quthb yang tersembunyi dan sosok Imam yang mulia. Suatu ketika pernah ada yang bertanya kepada beliau, " Apa kelak akan ada seseorang yang berbohong atas namamu?," Beliau menjawab , " iya, maka jika kalian mendengar sesuatu dariku, timbanglah itu dengan secara syariat, jika itu sesuai dengan syariat, maka amalkanlah,...

TUJUH CARA MELATIH DIRI MENJADI PEMIMPIN YANG LEBIH BAIK.

Memimpin sebuah perusahaan baik besar maupun kecil bukanlah hal yang mudah. Ada banyak yang harus dipelajari dan dilakukan untuk menjadi pemimpin baik yang mampu membawa perusahaan menjadi sukses. Mencapai dan melebihi target dalam sebuah bisnis memang dinilai menjadi tolak ukur kesuksesan seorang pemimpin. Karena ketika itu terjadi, pemimpin tersebut dinilai mampu memimpin dengan benar dan tepat, sehingga mampu membawa bisnis mencapai sukses. Terlihat rumit dan berat saat difikir untuk dijalani. Tapi menjadi seorang pemimpin yang baik dan besar bukanlah hal yang sulit untuk dipelajari. Kita bisa melatih diri kita untuk menjadi pemimpin yang lebih baik dari sebelumnya. Ini dia caranya: 1. Jangan takut akan kegagalan besar Untuk menjadi seorang pemimpin besar tidak ada yang berjalan tanpa satu hambatan sekecil apapun itu. Akan ada banyak rintangan dan tantangan yang harus dihadapi dan dilewati dengan kekuatan sebagai seorang pemimpin. Bukan tanpa alasan, karena ketika seorang...

LIMA CARA SUKSES JUALAN ONLINE TANPA MODAL UNTUK PEMULA

5 Cara Sukses Jualan Online Tanpa Modal Untuk Pemula Jualan online kini tengah menjadi salah satu alternatif usaha yang bisa dilakukan dengan modal kecil dan omzet yang tidak main-main. Oleh karena itu sekarang ini banyak sekali orang yang terjun ke dunia bisnis online dan menekuninya dengan serius. Bukan hanya menjadi salah satu alternatif usaha, tetapi karena perubahan zaman yang cepat, orang-orang yang melakukan bisnis offline mau tidak mau harus terjun ke bisnis online agar tidak tersingkirkan oleh perubahan zaman. Berikut  adalah beberapa tips untuk meledakkan toko online Anda. 1. Tentukan Niche dan Produk Anda Hal pertama yang harus diperhatikan jika ingin memulai bisnis sebagai penjual online adalah menentukan apa produk dan niche market yang akan Anda tawarkan. Anda harus melakukan riset terlebih dahulu sebelum terjun ke dunia jual beli online. Anda dapat melakukan riset dengan bertanya langsung ke orang-orang di sekitar Anda, membuat kuesioner dan membu...

MERENCANAKAN KEUANGAN MASA PENSIUN DILENGKAPI FAKTA DAN TIPS

Aman secara financial selepas pensiun bukanlah hal yang terjadi tiba-tiba. Setelah mengharapkan program pensiun dari tempat kerja, dibutuhkan banyak perencanaan, waktu, dan upaya penghematan. Bagi mereka yang berstatus   karyawan terutama bagi yang purna tugas sering muncul pertanyaan mengenai hal-hal yang berkaitan dengan pensiun. Apakah kita sudah siap apabila masa pensiun tiba ? Apakah kita telah mempersiapkan dana pensiun selain sejumlah dana yang akan kita terima dari tempat bekerja ? Berapa banyak teman kantor kita yang kurang respon kalau masa pensiun mereka hanya tinggal beberapa tahun lagi atau hitungan bulanan? FAKTA DAN TIPS Didalam dunia tenaga kerja alias karyawan, ada sejumlah fakta yang dapat kita temui. Pertama, lebih dari 50 persen orang tidak memiliki kekuatan financial yang cukup untu pensiun. Kedua, sekitar 25 prosen orang tidak berpartipasi dalam program pensiun perusahaan mereka. Dan fakta terakhir rata-rata orang menghabiskan 20 tahun masa pensiun....

DELAPAN UNSUR UNSUR PENILAIAN PEKERJAAN

Anda perlu meningkatkan etos kerja sehingga dapat memiliki mental juara.  Berkaitan dengan ini, anda perlu mengetahui ukuran atau standar perusahaan dalam menilai karyawannya yang memiliki etos kerja. Dalam hal ini, Hadari Nawawi mengaitkan unsur-unsur dalam penilaian pekerjaan sebagai berikut : a. Kesetiaan seseorang sebagai karyawan Kesetiaan disini merupakan bagian dari integritas sekaligus salah satu ukuran tinggi rendah etos kerja seseorang. Kesetiaan secara umum dimaknai sebagai kesungguhan seseorang di dalam mengemban dan menjalankan tugas-tugas yang dibebankan kepadanya. Selain itu, setia juga berarti bersedia dengan penuh kesadaran dan tanggungjawab yang diikuti tekat kuat demi mencapai hasil kerja maksimal. b. Prestasi kerja Prestasi merupakan wujud komitmen dan integritas diri. Adapun prestasi kerja ialah hasil kerja yang dicapai oleh seorang karyawan dalam melaksanakan tugas yang dibebankan kepadanya. Prestasi kerja akan dicapai jika pekerja memiliki integri...