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

TAHU KAPAN MENERIMA KENYATAAN, TAHU KAPAN MENGGUNAKAN EUFEMISME

🔓Owner Post Published 🕕
Banyak media dan korporasi menggunakan bahasa untuk menyembunyikan kondisi ataupun suatu hal menjadi tidak jujur, begitu juga dalam bisnis. Biasanya pada saat keadaan buruk terjadi pada bisnis, tentu kita akan merasa tidak nyaman, mungkin juga memalukan, dan menyakitkan, akhirnya tidak jarang kita seringkali menyembunyikannya di ballik penghalusan-penghalusan kata. Hati-hati, bisa jadi ini adalah penghalusan-penghalusan yang membuat orang merasakan FEEL GOOD dalam waktu sementara, tapi tidak membuat mereka jujur pada diri sendiri. Meskipun penghalusan bahasa bisa membuat Anda FEEL GOOD, membuat Anda jauh lebih sopan, tetapi ingat bahwa untuk hal-hal tertentu Anda harus jujur. Dalam bisnis, Anda harus bisa melihat kenyataan yang sebenarnya dalam bentuk hasil yang nyata, alih-alih melakukan perbaikan bisnis terus-menerus supaya target perusahaan bisa tercapai dan menyenangkan di mata pelanggan. Anda harus tahu mengapa seseorang tidak menggunakan produk atau jasa yang Anda ber...
Posting Komentar
🔗BACA SELENGKAPNYA »

OUT OF THE BOX CARA BERANI KELUAR DARI ZONA NYAMAN

🔓Owner Post Published 🕕
Kreativitas menjadi salah satu factor sebuah organisasi / perusahaan yang bisa bertahan dan terus berprestasi. Untuk menjadi kreatif tentu dibutuhkan pemikiran yang out of the box dan berani keluar dari zona nyaman. Temukan 101 kreativitas ini untuk menjalankan usaha layananan bisnis/marketer anda agar dicintai atau disenangi pelanggan : 1. Berjalan-jalan dan mencari sesuatu yang menarik. 2. Buatlah hubungan metaforis-analogis antara sesuatu yang menarik dan masalah Anda. 3. Buka kamus dan cari kata baru. Gunakan itu dalam sebuah kalimat kunci. 4. Buat hubungan antara kata dan masalah Anda. 5. Bagaimana gunung es bisa keras seperti itulah ide yang bisa membantu Anda memecahkan masalah Anda? 6. Buat ide terbodoh yang Anda bisa. 7. Mintalah pendapat seorang anak. 8. Buatlah doa yang meminta bantuan untuk masalah anda. 9. Seperti apa rasanya posisi pesawat dibawah langit? 10. Buat ide seolah olah membuat Anda dipecat dari perusahaan. 11. Baca koran yang berbeda. ...
Posting Komentar
🔗BACA SELENGKAPNYA »

MARKETING ADALAH SUATU PROSES ATAU CARA MEMASARKAN PRODUK

🔓Owner Post Published 🕕
Keuntungan suatu bisnis bergantung pada kegiatan pemasarannya. Proses pemasaran biasa disebut dengan istilah marketing. Pengertian marketing di dalam masyarakat sering disalah artikan. Marketing sering kali disama artikan dengan sales. Padahal dalam bahasa inggris pun jelas bahwa marketing berarti pemasaran, sedangkan sales berarti penjualan. Marketing adalah serangkaian proses yang dilakukan untuk memasarkan produk atau mengenalkan produk kepada masyarakat dengan berbagai cara, agar produk tersebut menjadi banyak diminati oleh masyarakat luas. Sehingga dalam hal ini pengertian marketing tidak hanya sebatas saat terjadi pemasaran, namun juga mengenai strategi yang digunakan, serta cara memberikan kepuasan kepada konsumen. Customer satisfaction survey on a sky background Konsumen sebagai orientasi utama kegiatan pemasaran. Kepuasan konsumen menjadi hal yang paling penting untuk diperhatikan. Jika pada proses sales hubungan konsumen terjadi hanya pada saat itu. Berbeda dengan ...
Posting Komentar
🔗BACA SELENGKAPNYA »

PENTINGNYA BISNIS ANDA MENJADI BISNIS UNIK

🔓Owner Post Published 🕕
Unik bisa jadi kata kunci buat kesuksesan Anda. Saya sering melihat bisnis – bisnis unik yang bahkan nyerempet aneh tapi tetap bermanfaat selalu meraih sukses. Pastinya unik itu membuat perbedaan untuk bisnis Anda. Beda itu tidak harus yang wah. Pasti pernah dengar istilah karena nila setitik rusak susu sebelanga. Kalau itu konteksnya lebih kesalahan. Nah, pointnya coba Anda jadikan si nila ini Sesuatu yang unik tapi membuat bisnis Anda menjadi besar. Setitik nila anggap saja ide yang sederhana, so tidak perlu susah untuk jadi Bisnis unik. Saya pernah dengar cerita di daratan Eropa pernah muncul soal fisika yang menanyakan cara menentukan tinggi bangunan lantai 35 dengan barometer. Kalau Anda yang ditanya mau jawab apa? Pasti bingung tapi Fitra Jaya Saleh, pemenang nobel fisika di Denmark sekaligus coach bisnis menjawab kalau bisa digunakan dengan cara mengaitkan barometer dengan benang lalu turunkan dari lantai atas hingga tanah. Itu sangat simple bukan? Tapi kadang kit...
Posting Komentar
🔗BACA SELENGKAPNYA »

ABU NAWAS DIGELANDANG POLISI

🔓Owner Post Published 🕕
Abu Nawas Digelandang Polisi,  Ibnu Sina dan Tradisi Berpikir dalam Islam Alkisah, di suatu malam, kepala keamanan kerajaan –atau kalau sekarang bisa disebut polisi, beserta beberapa pengawalnya melakukan patroli di jalanan kota Baghdad. Di tengah patroli mereka tak sengaja memergoki Abu Nawas sedang mabuk-mabukan dan omongannya meracau tak jelas. Melihat kondisi Abu Nawas yang sudah mabuk berat, kepala polisi memerintahkan pengawalnya untuk menggelandang Abu Nawas ke pos pengamanan dan menahan Abu Nawas semalaman, hingga ia sadar kembali keesokan harinya. Esok paginya ketika Abu Nawas sudah sadar kembali, sang komandan polisi menyampaikan berita ihwal ditangkapnya Abu Nawas kepada khalifah Harun ar-Rasyid. Mendengar berita ditangkapnya Abu Nawas, khalifah Harun ar-Rasyid lantas memerintahkan sang komandan polisi untuk menghadirkan Abu Nawas di hadapannya. Singkat cerita, ketika Abu Nawas berada di hadapan khalifah Harun ar-Rasyid, tanpa basa-basi khalifah Harun ...
Posting Komentar
🔗BACA SELENGKAPNYA »