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

SOLUSI HARAPAN AGAR TIDAK PUTUS ASA

🔓Owner Post Published 🕕
Sebagai catatan, apabila harapan anda sudah hilang dan berganti keputusasaan maka hal itu akan berdampak negatif. Di antara dampak-dampak tersebut ialah hilangnya semangat menjalankan usaha; penurunan produktivitas kerja; menghilangkan kepercayaan diri; berkurangnya tingkat kepercayaan dari rekan-rekan kerja, pelanggan, pemasok, dan kreditor; serta ketidakpastian kelangsungan usaha yang sedang dijalankan. Cara mengatasi situasi keputus-asaan ialah menumbuh kembangkan keyakinan, kepercayaan diri, serta antusiasme. Selain itu, ketabahan harus dijaga agar tetap kuat dalam menghadapi cobaan dan kesulitan hidup. Kualitas sumber daya manusia juga harus ditingkatkan dengan cara memperbaiki diri sendiri sehingga asa tetap terjaga dengan baik. Putus asa adalah menurunnya mood dan hilangnya semangat dan motivasi hidup yang disebabkan oleh suatu peristiwa maupun tidak tercapainya suatu keinginan. Putus asa bersumber dari depresi dan frustrasi yang seringkali dialami seseorang dalam kehid...
Posting Komentar
🔗BACA SELENGKAPNYA »

MEMBANGUN KOMUNIKASI MULTI DEMENSI YANG BAIK

🔓Owner Post Published 🕕
Komunikasi merupa-kan elemen vital dalam berinteraksi dengan orang lain, baik dalam pekerjaan maupun urusan lain-nya. Berkomunikasi secara baik bukan be r arti harus menjadi komunikator seperti halnya seorang orator ulung atau juru debat yang fasih. Anda cukup menjadi seseorang yang pandai membawa diri dan berkomunikasi dengan siapa pun sesuai kepentingan dan kondisi lawan bicara. Tentunya patut disadari cara anda berkomunikasi dengan penjual makanan dipinggir jalan berbeda dengan terhadap atasan di tempat kerja atau contoh lain komunikasi yang anda bangun diwarung kopi tentu jauh berbeda dengan pola yang patut diterapkan saat melakukan presentasi pekerjaan. Jadi, membangun komunikasi yang baik dan tepat sasaran merupakan salah satu dasar anda dapat dipercaya oleh rekan kerja. Tidak sedikit kalangan ahli yang merumuskan makna komunikasi.Sebagai   bagian dari sejarah umat manusia, komunikasi memiliki peran penting dalam membangun peradaban. Secara harfiah, komun...
Posting Komentar
🔗BACA SELENGKAPNYA »

SUFISME JALAN MEMBANGUN ZAHIR DAN BATHIN

🔓Owner Post Published 🕕
Bismillahirrahmanirrohim Ilahi anta maqshudi wa ridhoka mathlubi. Saya mau menjelaskan mengapa saya selalu mengatakan ajaran ajaran sufi, sufisme, tasawwuf, dll yang mungkin ada kebingungan bagi yang menyimak. Disini bukan bermaksud untuk menyebarkan faham aliran baru, agama baru, dan lain-lain yang dituduhkan bahwa sufi adalah liberal, seperti yang dituduhkan kepada Nu, sipilis, Jil, Jin, Anus dan lain-lain. Yang mana bagi mereka golongan ini adalah golongan yang merusak islam dari dalam, saya jawab bahwa mungkin ada kesamaan faham sufi dengan aliran liberal, tapi sebenarnya berbeda, bagi golongan liberal alqur'an itu harus direvisi mengganti ayat-ayat yang mana golongan ini seperti ingin mengganti alquran layaknya kitab perjanjian lama dengan perjanjian baru. Faham sufi tidak seperti itu sufi tidak merevisi atau mengganti ayat tapi menggali makna dalam ayat. Hingga selaras dengan pesan-pesan Universal Nabi Muhammad, Islam Rahmatan Lil Alamin. Lalu apa maksud ...
Posting Komentar
🔗BACA SELENGKAPNYA »

USAHA BUDI DAYA UDANG GALAH DENGAN AIR TAWAR

🔓Owner Post Published 🕕
Usaha Budi daya Udang Galah Dengan Air Tawar. Udang galah atau dalam bahasa latinnya disebut Macrobrachium rosenbergii de man merupakan komoditas perikanan air tawar dan menjadi salah satu kekayaan alam Negara Indonesia. Jenis udang air tawar yang sering disebut udang galah ini memang mempunyai potensi cukup besar sehingga bisa menghasilkan keuntungan yang berlipat.  Selain udang galah memiliki ukuran terbesar jika dibandingkan dengan jenis udang air tawar lainnya, udang jenis ini juga memiliki nilai ekonomis penting karena udang galah memiliki banyak penggemar baik dalam negeri maupun luar negeri seperti Jepang dan beberapa di Eropa. Oleh sebab itulah udang galah menjadi salah satu andalan komoditas ekspor.  Konsumen Semua orang membutuhkan protein hewani untuk memenuhi kebutuhan tubuhnya, udang galah menjadi salah satu sumber protein hewani yang banyak digemari oleh para konsumen. Namun harga udang galah memang cukup tinggi, sehingga membuat jenis udang yang ...
Posting Komentar
🔗BACA SELENGKAPNYA »

TIGA CARA PEMIMPIN YANG DISEGANI

🔓Owner Post Published 🕕
Halo Leaders! Menjadi leader membuat Anda memiliki otoritas dan kekuasaan. Yang membedakan antara good leader dengan bad leader adalah bagaimana Anda menggunakan otoritas dan kekuasaan tersebut. Good leader yaitu Anda, tidak akan menggunakannya untuk mengintimidasi dan membuat ketakutan dalam mengelola tim. Bad leader mengintimidasi dan membuat ketakukan, mengutip kalimat gurunda kek Jamil Azzaini ; bad leader kerjanya cuma dua ‘ah’. ‘ah’ pertama yaitu perintah dan ‘ah’ kedua marah, leader yang kerjanya cuma perintah-perintah jika tidak ada lagi yang diperintah ia marah-marah, hal itu ia lakukan karena tidak memiliki ‘ah’ yang namanya Kafa’ah (kemampuan). Banyak leader tidak tahu bahwa sikap mereka akan menjadi standar bagaimana staf memperlakukan staf lain dan konsumen. Bagaimana agar Anda dapat menularkan sikap yang baik kepada staf dan akhirnya sikap positif akan berdampak pada pelayanan kepada konsumen? Biasakan melakukan “3 Jangan” : 1. Jangan menginti...
Posting Komentar
🔗BACA SELENGKAPNYA »