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

SATU JUTA TAHUN

🔓Owner Post Published 🕕
Kalau Anda berlangganan Disney Hotstar, tontonlah Year Million, sebuah fim dokumenter tentang kehidupan manusia sejuta tahun ke depan. Istilah "year million" bukan benar-benar berarti satu juta tahun dari sekarang. Ini hanyalah sebuah istilah untuk merujuk masa depan yang telah berubah secara radikal, masa depan ketika manusia, homo sapiens, sudah bertransformasi menjadi transhuman, manusia robot . Ia bisa saja terjadi lebih cepat dari itu. Bisa 1000 tahun lagi, bisa 500 tahun lagi, atau mungkin juga 100 tahun lagi. Intinya, perubahan ke arah itu adalah sebuah kepastian. Manusia akan hidup dengan cara yang tak lagi sama.  Pada episode pertama, Sapiens 2.0, sepasang suami-isteri kehilangan anaknya dalam sebuah kecelakaan mobil. Lalu, sebuah piranti terbang, meminta persetujuan agar ia mendownload seluruh memori pada otak anaknya yang telah meninggal. Setelah disetujui, otak anak didownload, dan dalam 72 jam kemudian, sang anak kembali pulih dalam bentuk robot yang memiliki sem...
Posting Komentar
🔗BACA SELENGKAPNYA »

DISKUSI KOMENTAR WEB EDITBLOGTEMA

🔓Owner Post Published 🕕
Saya tidak akan mengejar backlink sepanjang Google tidak menuntut itu. Saya hanya ingin trafik. Karena trafik erat kaitannya dengan bisnis. Saya lebih kuatir melihat Google analitik ketimbang halaman MOZ. Jadi itu alasannya mengapa editblogtema tidak memiliki backlink yang sesuai dengan niche, dan itu absurd, karena blog ini adalah panduan, tutorial dan pembahasan teknis seputar blogging. Akan tetapi puluhan konten editblogtema telah mendapatkan tempat yang tinggi di sisi mesin pencari. Itu menurut Google sendiri lho. Percayalah tidak ada satu apapun yang dapat kita lakukan untuk meningkatkan SEO, selain membuat konten, meningkatkan kecepatan blog dan membayar kampanye untuk mempromosikan halaman blog. Buatlah konten yang berkualitas, jangan membuang waktu mengejar ranking jika 'hadiahnya' hanyalah perasaan bangga yang semu... KESIMPULAN Moz tetap berharga, karena pengaplikasiannya telah di terima secara luas. Namun Google memiliki rahasia dapurnya sendiri. Pergunakan analitik ...
Posting Komentar
🔗BACA SELENGKAPNYA »

SECARA OBYEKTIF ANDA HARUS MEMBUAT PENILAIAN DIRI SENDIRI

🔓Owner Post Published 🕕
Apabila ingin sukses dan menjadi orang nomor satu di lingkungan pekerjaan, anda harus megetahui terlebih dahulu kapabilitas dan kemampuan diri sendiri. Melalui pengetahuan terhadap kapasitas diri, anda secara otomatis dapat mengepakkan sayap karier dengan mudah. Selain hal tersebut, anda juga perlu memberikan penilain pada diri sendiri secara objektif. Penilaian diri secara objektif   tidak dapat hanya dilakukan terhadap posisi atau jabatan pekerjaan anda. Anda juga dapat melakukannya ketika melakukan evaluasi diri. Saat mengevaluasi diri sendiri, anda akan mengetahui sejauh mana kapasitas, kekurangan, dan kelebihan pada diri anda. Dengan demikian, anda dapat melakukan langkah selanjutnya untuk mengoptimalkan kelebihan serta berupaya memperbaiki kekurangan diri. Berpikir positif adalah hal yang dapat mencurahkan perhatian anda untuk berkembang. Memberikan penilaian secara objektif terhadap perilaku, kegagalan, kesuksesan, atau dampak dari pekerjaan secara tidak lan...
Posting Komentar
🔗BACA SELENGKAPNYA »

VIRAL HERCULES TAUBAT DITANGAN GUS MIFTAH

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

MENJAGA INTERGRITAS DIRI DISETIAP SITUASI

🔓Owner Post Published 🕕
Ada sebuah kisah menarik yang mugkin pernah anda jumpai di lingkungan sekitar. Suatu hari, ada seorang ibu yang membeli makanan ringan di mini market. Harga makanan ringan yang dibelinya sebesar Rp 23.500,00. Iya membayar dengan memberikan selambar uang Rp 50.000,00. Kasir kemudian memberikan uang kembalian Rp 28.500,00. Tanpa menghitung ulang, ibu tersebut beranjak dengan membawa belanjaannya. Sesampai di rumah, ibu tersebut menghitung uang kembalian yang ternyata kelebihan Rp 2.000,00. Meskipun cukup jauh dari rumah, ibu itu kembali ke mini market untuk mengembalikan kelebihan uang kembaliannya. Inilah kisah nyata yang mungkin pernah anda temukan dalam kehidupan. Di sinilah integritas itu diuji.   Berdasarkan kisah tersebut dapat disimpulkan bahwa integritas berhubungan dengan jati diri. Integritas menunjukkan kesejatian (kemurnian), bukan kemunafikan atau kepura-puraan. Integritas adalah suatu sikap dimana seseorang tetap melakukan hal yang benar dalam berbagai situasi se...
Posting Komentar
🔗BACA SELENGKAPNYA »