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

MUHAMMAD THOLHAH AL-FAYYAD : ASAL MUASAL TASAWUF DALAM ISLAM

Ilustrasi Gambar Ajaran sufi dan tasawuf adalah ajaran untuk mengikuti jejak para ulama salaf yang bersumber dari ajaran para shahabat dan tabi’in.  Sufi dan tasawuf adalah ungkapan yang sering kita dengar di kalangan masyarakat. Ramainya arus perkembangan thariqah di indonesia menjadi pendongkrak ramainya kajian tasawuf belakangan ini. Kondisi ekonomi dan sosial yang tak menentu membuat manusia rindu akan kedamaian dan kedekatan dengan Allah. Dan pada akhirnya menyusuri jalan sufi adalah solusi kegalauan hati kita bersama yang telah lama terpenjara oleh hawa nafsu.    Sebuah pertanyaan muncul, bagaimanakah sejarah awal ditemukannya istilah sufi dan tasawuf? Untuk menjawab hal ini, kiranya kita harus meneliti berbagai manuskrip sejarah Islam. Menurut Dr. Muhammad Ahmad Salim dalam kitab Quthuf min Basathin at-Tasawuf, ada 3 pendapat mengenai asal-usul istilah tasawuf dalam Islam.    Pertama, menurut as-Siraj ath-Thusi (w. 378 H) istilah sufi dan tasawuf sudah di...

APA ITU RUH

Apa itu Ruh ? Firman Allah dalam surah Al-Isra ayat 85 : "Dan mereka bertanya kepadamu tentang ruh. Katakanlah: “Ruh itu termasuk urusan Tuhan-ku, dan tidaklah kamu diberi pengetahuan melainkan sedikit”. Firman Allah diayat ini menyatakan bila ilmu tentang Ruh ini yang dapat diungkap pengetahuannya kepada para hamba-Nya hanyalah sedikit saja. Nabi Muhammad sebagai Utusan Allah juga sama seperti manusia biasa yang mempunyai sisi manusiawi yang memiliki umur dan usia. Rasulullah memiliki keterbatasan waktu di dunia ini untuk menjalankan tugas Dakwahnya kepada para ummatnya setelahnya, maka kemudian Allah mewariskan tugas ini kepada para ulama yang shalih yang sudah mencapai kesucian ruh dan beberapa telah Allah berikan bashiroh (pandangan yang jelas) kepadanya. Siapa mereka? Mereka adalah para Wali Allah. Para Wali Allah sebagai ahli bashiroh telah dibukakan mata hatinya untuk mengetahui jalan menuju Allah, mereka inilah yang disebut Warasatul Anbiya. Post ini adal...

SAUDARA EMPAT

Saudara Empat Dalam adat dan ajaran asli kejawen dikenal istilah 'SEDULUR PAPAT KELIMA PANCER' artinya Empat Saudara dan Yang Kelima PANCER di Tengah, pancernya itu adalah badan jasmani diri kita sendiri, ada juga yang mengatakan sedulur papat mereka adalah kiblat papat lima ditengah (empat jurusan yang kelima di tengah). Awal mula kehidupan manusia didunia ini diawali dari saat-saat kita masih berada di janin dan menjelang kelahiran ke dunia. Sebelum sang bayi (pancer) lahir dari rahim ibu, setiap manusia mempunyai empat saudara ketika masih berupa janin mereka selalu menjaga pertumbuhan manusia yang masih didalam kandungan Ibu. Adapun yang disebut sedulur papat adalah Air kawah (ketuban), Ari-ari (plasenta), Getih (darah) dan puser (tali plasenta) Mereka yang disebut sedulur papat. 1-KAKANG KAWAH: saudara tua kawah, dia keluar dari gua garba ibu sebelum kamu, tempatnya di timur warnanya putih. 2-ADI ARI-ARI: adik ari-ari, dia keluar dari gua garba ibu sete...

PERATURAN TWITTER

Kami berkomitmen untuk menciptakan budaya kepercayaan, keamanan, dan rasa  hormat. Sebagai platform yang terbuka dan global, Twitter adalah rumah bagi  berbagai orang, sudut pandang, ide, dan informasi. Itulah mengapa kami  berfokus untuk memberikan kekuatan pada tiap suara untuk memberi dampak  pada dunia dengan membantu orang-orang melihat setiap sisi cerita saat  cerita bergulir. Kami memiliki serangkaian aturan untuk ratusan juta orang yang menggunakan  Twitter dan ratusan juta Tweet yang dikirim setiap hari. Untuk menjadikan  Twitter sebagai platform yang lebih aman, Peraturan Twitter mencakup tren  terbaru dalam perilaku online, mempertimbangkan konteks budaya dan sosial,  dan membantu menetapkan ekspektasi seputar apa yang diperbolehkan di  platform. Kami bekerja dengan beberapa ahli keamanan online terkemuka yang  tercantum di Dewan Kepercayaan dan Keamanan global kami untuk petunjuk dan  umpan balik mengenai ...

WALI JADZAB DAN CIRI-CIRINYA

Jadzab terjadi saat wali Allah "lepas" dalam kapasitasnya sebagai manusia karena tampak secara jelas padanya sifat-sifat Allah (tajalli). Meyakini adanya manusia pilihan yang menjadi kekasih Allah adalah salah satu ajaran dalam agama Islam.  Kekasih Allah atau yang biasa dikenal dengan waliyullah adalah orang-orang terpilih yang memiliki kedekatan secara khusus dengan Allah subhanahu wata’ala. Mengenai waliyullah ini, Al-Qur’an menjelaskan:   أَلَآ إِنَّ أَوْلِيَآءَ ٱللَّهِ لَا خَوْفٌ عَلَيْهِمْ وَلَا هُمْ يَحْزَنُونَ “Ingatlah, sesungguhnya wali- wali Allah itu, tidak ada kekhawatiran terhadap mereka dan tidak (pula) mereka bersedih hati” (QS. Yunus: 62).    Waliyullah secara umum terdiri dari berbagai macam kategori. Mulai dari wali abdal, wali autad, wali nuqaba’, wali nujaba’, sampai wali qutb al-aqthab. Para waliyullah ini mengemban berbagai macam tugas masing-masing serta diberi keistimewaan oleh Allah dengan memiliki karamah yang berbeda-beda (Syekh Dli...