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

Gambar
🔓Owner Post Published 🕕
HOME GOOGLE 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

Posting Komentar

SILAKAN KOMENTAR SESUAI TOPIK.....

POPULAR POST

KEISTIMEWAAN IMAM HADDAD RA PENCIPTA RATIB AL HADDAD

🔓Owner Post Published 🕕
Keistimewaan Imam Haddad RA, Pencipta Ratib Al Haddad 1. Imam Abdullah Al-Haddad bin Alwi bin Muhammad bin Ahmad bin Abdullah bin Muhammad bin Alwi bin Ahmad bin Abu Bakar bin Ahmad bin Muhammad bin Abdullah bin al-Faqih Ahmad bin Abdurrahman bin Alwi bin Muhammad Shahibu Marbath bin Ali Khali` Qasam bin Alwi bin Muhammad bin Alwi bin Ubaidillah bin Ahmad al-Muhajir bin Isa bin Muhammad bin Ali al-Uraidhi bin Ja`far ash-Shadiq bin Muhammad al-Baqir bin Ali Zainal Abidin bin al-Husain bin Ali bin Abi Thalib, suami Fathimah az-Zahra binti Rosulillah SAW. 2. Al-Arifbillah Quthbil Anfas Al-Imam Habib Umar bin Abdurrohman Al-Athos ra. mengatakan, “Al-Habib Abdullah Al-Haddad ibarat pakaian yang dilipat dan baru dibuka di zaman ini, sebab beliau termasuk orang terdahulu, hanya saja ditunda kehidupan beliau demi kebahagiaan umat di zaman ini (abad 12 H)”. 3. Al-Imam Arifbillah Al-Habib Ali bin Abdullah Al-Idrus ra. mengatakan, “Sayyid Abdullah bin Alwy Al-Haddad adalah Sultan ...
Posting Komentar
🔗BACA SELENGKAPNYA »

DELAPAN UNSUR UNSUR PENILAIAN PEKERJAAN

🔓Owner Post Published 🕕
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...
Posting Komentar
🔗BACA SELENGKAPNYA »

TIPS MANAJEMEN BERWIRA USAHA ALA OTO BEMO BERODA TIGA

🔓Owner Post Published 🕕
Cara Mengatasi Berbagai Hambatan dan Kendala Dalam Berwirausaha – Wajar jika dalam memulai usaha, bisnis, dan juga berwirausaha selalu saja terdapat rintangan, tantangan, hambatan, dan kendala yang menghadang, karena disinilah seorang pengusaha akan diuji ketangguhannya. Hambatan dan kendala ini tidak hanya datang kepada para pengusaha pemula saja, tapi juga dihadapi oleh pengusaha yang berpengalaman sekalipun, hanya saja disini sering kali terdapat perbedaan bagaimana mereka menghadapi hambatan dan kendala tersebut. Namanya saja sudah berpengalaman, jadi pengusaha yang seperti ini tentu saja sudah memiliki jurus-jurus ampuh untuk mengatasi setiap kendala yang menghadangnya, bahkan postingan seperti artikel ini mungkin sudah tidak lagi dibutuhkan oleh mereka. Tapi lain ceritanya dengan pengusaha yang masih balita, masih kurang pengalaman. Secerdas apapun mereka, sekreatif apapun mereka namun karena kurangnya pengalaman sering kali menimbulkan kekakuan dalam memecahkan setiap ma...
Posting Komentar
🔗BACA SELENGKAPNYA »

DIATAS LANGIT MASIH ADA LANGIT

🔓Owner Post Published 🕕
“Di atas langit masih ada langit” merupakan ungkapan yang sering digunakan untuk mengingatkan kita agar tidak berlaku sombong atas apa yang kita miliki, baik itu kekayaan, kecantikan, ketampanan, dan kepintaran. Hal-hal yang bersifat duniawi memang seringkali menjadi sebab seseoang untuk berlaku sombong. Padahal kita tidak berhak berlaku sombong, karena sesungguhnya apa yang kita miliki  hanyalah titipan dari Allah yang seharusnya kita jaga sebaik-baiknya. Kita tidak pernah tahu sampai kapan semua yang kita miliki akan menjadi milik kita, sehingga kita tidak boleh menyombongkannya. Orang-orang kaya bisa bangkrut dan menjadi miskin, orang yang  cantik dan tampan akan bertambah tua, lalu apa yang hendak kita sombongkan?   Penyebab sifat sombong yang ada dalam diri kita adalah karena kita seringkali merasa lebih baik dari orang lain, kita selalu merawa t bahwa kedudukan kita lebih tinggi, kita pun seringkali merasa lebih cantik dari orang lain. Hal-hal semacam inil...
Posting Komentar
🔗BACA SELENGKAPNYA »

SALAH PILIH

🔓Owner Post Published 🕕
Tak ada model negara Islam yang berhasil. Ketika sukses meruntuhkan rezim Pahlevi pada 1979, rakyat Iran memilih Islam sebagai dasar negara. Mereka mengganti bentuk negara yang semula kerajaan menjadi republik. Republik Islam Iran namanya. Tapi, setelah 40 tahun menjalaninya, terbukti bahwa pilihan ideologi Islam itu salah. Bukannya menjadi negara maju dan makmur, Iran malah menjadi negara yang dibenci dan dimusuhi banyak orang. Kini, negara itu bukan hanya dimusuhi negara lain, tapi juga dibenci rakyatnya sendiri. Gelombang protes terus membesar. Sudah lebih dari 50 orang tewas. Mereka bukan sekadar protes terhadap aturan jilbab, tapi juga meneriakkan kecaman pada rezim: "Mampuslah diktator!" Rakyat Iran sudah muak dengan perilaku rezim Islam yang tak memberikan kebahagiaan. Tapi, justru menghadirkan malapetaka bagi mereka. Baca Juga :  Satu-juta-tahun Iran adalah contoh negara Islam yang gagal. Seperti juga negara-negara Islam lain, Iran tak mampu menghadirkan apa yang mere...
Posting Komentar
🔗BACA SELENGKAPNYA »