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

METODE IRFANI DALAM MENAFSIRKAN AL QUR'AN MENURUT IBNU ARABI

Metode Irfani dalam Menafsirkan Alquran Menurut Ibnu Arabi Kitab al-Futuhat al-Makkiyyah karya Ibnu Arabi merupakan kitab yang unik. Pasalnya, kitab ini selalu menyajikan ajaran-ajaran kesufian yang elegan yang dalam pandangan muslim awam terasa sangat kontroversial. Di artikel sebelumnya, kita telah melihat bersama bagaimana Ibnu Arabi memprediksi kapan kemunculan Imam Mahdi dan kapan terjadinya kiamat yang semuanya itu meleset dari perkiraan kasyafnya, kali ini kita akan mengulas kembali pemikiran Ibnu Arabi yang lain, yakni soal bagaimana kita membaca Alquran secara sempurna dan komperehensif. Jika ingin bisa memahami Alquran secara baik dan sempurna, kata Ibnu Arabi, kita harus memosisikan diri kita seperti posisi Nabi dalam menerima wahyu Alquran pertama kali dari Jibril. Menurut Ibnu Arabi, karena Alquran turun kepada hati nabi Muhammad SAW dan kemudian beliau sampaikan kepada umatnya dengan bahasa Arab, tentunya pemahaman yang paling sempurna ialah pemahaman hati dimana ...

WAHDATUL ADYAN

Wahdatul adyan Inti ajaran dari Faham Wahdah al adyan (Kesatuan segala agama) adalah sebagai pemahaman tentang Nur Muhammad. Yakni tentang qadimnya Nur Muhammad. Sebenarnya agama yang berbeda-beda itu hanyalah nama saja yang berbeda, tapi hakikatnya satu saja. Nama berbeda namun satu tujuan. seperti Islam, Nasrani, Yahudi dan yang lain-lain hanyalah perbedaan nama dari hakikat yang satu. Segala agama adalah agama Allah maksudnya adalah semuanya menuju Allah. Orang yang terlahir dalam suatu agama, bukanlah atas kehendaknya, tetapi dikehendaki untuknya. Cara ibadah bisa berbeda caranya, namun tujuannya sama, Hakikatnya pada yang satu. Dari ‘Abdullah bin Tahir al-Azdi mengatakan, lalu dicatat oleh al-Taftazani didalam kitabnya sebagai berikut : “Suatu hari aku bertengkar dengan orang yahudi di pasar baghdad. Diapun kumaki: "Hai anjing". Ketika itu al-Hallaj lewat dan memandangku dengan geram. Lalu beliau menegurnya : jangan kau maki anjingmu. Al-Hallaj pun lan...

DIRI SEBENAR DIRI

Berkatalah Arifbillah: DIRI SEBENAR DIRI itu ialah : BADAN AKAL ROH SIRR (rahasia) NUR (cahaya) HAKIKAT (Zat yang Mutlak) DIRI TERPERI itu ialah : DIRI yg mengikut segala perintah yaitu SIFAT ADAM (sifat kita). Yang senantiasa mengikut segala perintah daripada yang sebenar-benar DIRI yaitu ZAT MUTLAK. DIRI TERDIRI itu ialah : Antara ZAT dengan SIFAT antara ALLAH dan MUHAMMAD SIFAT berdiri pada ZAT walaupun berlainan tapi tidak bersalahan, tiada yg lain melainkan DIA jua. Inilah yg wajib kita NAFIKAN, ibarat CAHAYA MATAHARI daripada MATAHARI. Tapi bukanlah CAHAYA itu MATAHARI, atau MATAHARI itu CAHAYA, jadi kita itu ibarat sandaran DIA saja. Inilah yg dikatakan tidak BERCERAI dan tidak pula BERSEKUTU. dalam NAFI ada mengandung ISBAT. DIRI TAJALLI itu ialah : DIRI yg senantiasa hadir didalam PENGLIHATAN kita (marifat kita) Disinilah kita membuat PENGAKUAN, dengan sebenar-benar PENGAKUAN, bahwa ALLAH itu : seZAT, seSIFAT, seASM...

LAMPU LAMPU ITU BERBEDA NAMUN CAHAYA ITU SAMA

Dahulu saat saya sudah mempelajari ilmu Tasawwuf sebagai sisi bathin dalam ajaran Islam, maka semakin banyak saya pelajari semakin besar rasa keingintahuanku tentang hakikat kebenaran. Saat teman-teman yang lain hanya fokus belajar tasawwuf dari agama islam saja, tapi karena keinginan tahuanku tentang hakikat kebenaran sangatlah besar maka saya memutuskan juga mempelajari ajaran tasawwuf (Spiritual) dari agama-agama yang lain semisal Nashrani, Brahma, Hindu, Yahudi, buddha dan lain-lain. Dan kesimpulanku tasawwuf dalam islam dengan tasawwuf dalam agama lain mempunyai kesamaan walau syareatnya berbeda.. karena ajaran tasawwuf itu sudah ada semenjak nabi adam, ajaran tasawwuf ini bagian dari agama tauhid. Adanya sisi bathin (tasawwuf) yang terdapat dalam ajaran-ajaran Kristen, Yahudi, Hindu, Buddha, dan lain-lain malah memperkuat status kebenaran dari ajaran tasawwuf islam, seperti ada benang merah antara agama-agama yang ada didunia, dengan agama islam. Itu sebabnya d...

VIRAL HERCULES TAUBAT DITANGAN GUS MIFTAH

Hercules (Foto: @ipangwahid) Mendengar kisah hidup seorang Hercules, memang tak pernah bosan. Terkadang terasa memilukan dengan ribuan pengalamannya di masa lalu.  Hercules bernama asli Rosario de Marshall adalah seorang gangster dan broker politik asal Indonesia yang berasal dari Timor Timur. Hercules adalah seorang portir untuk TNI-AD pada masa integrasi Timor Timur.    Namun, siapa yang menyangka, di usia senjanya Hercules belajar kepada tokoh muda Nahdlatul Ulama (NU) Miftah Maulana Habiburrahman atau Gus Miftah.   Bersama Pimpinan Pondok Pesantren Ora Aji di Sleman, Yogyakarta itu, Hercules sering terlihat bersama. Hercules memanggil Gus Miftah 'Abah'. Terbaru, Hercules terlihat mengunjungi rumah Sekretaris Jenderal PBNU Ahmad Helmy Faisal Zaini didampingi Gus Miftah, Gus Ipang (cicit KH M Hasyim Asy'ari) dan Ustadz Yusuf Mansyur.    "Tadi Abah (Gus Miftah) telepon kalau mau ke rumah Pak Sekjen. Saya tanya boleh ikut apa tidak. Dibilang boleh akhi...