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

SUARA HARIAN OTO BEMO BERODA TIGA

🔓Owner Post Published 🕕
KATA PENGANTAR  Puji syukur kami panjatkan kehadirat Tuhan Yang Maha Esa karena dengan rahmat, karunia, serta taufik dan hidayah-Nya saya dapat membuat blog/site tentang apa saja yang menarik bagi penggemar membaca dengan baik meskipun banyak kekurangan didalamnya. Dan juga kami berterima kasih pada Bapak, Ibu, Saudara (i) selaku pelanggan Suara Harian Oto Bemo Beroda Tiga yang telah memberikan masukan kepada saya. Tak lupa juga ucapan terima kasih kepada teman - teman blogger telah ikut turut serta membantu dalam proses pemblo gingan ini. Saya juga menyadari sepenuhnya bahwa di dalam dunia bloging ini terdapat kekurangan dan jauh dari kata sempurna. Oleh sebab itu, saya berharap adanya kritik, saran dan usulan demi perbaikan blog/site yang telah saya buat untuk di masa yang akan datang, mengingat tidak ada sesuatu yang sempurna tanpa saran yang membangun. Semoga blog/site sederhana ini dapat dipahami bagi siapapun yang membacanya. Secara struktur, sistematis dan masif blog/site ya...
Posting Komentar
🔗BACA SELENGKAPNYA »

HALAL BIHALAL PDAM KOTA PONTIANAK

🔓Owner Post Published 🕕
PDAM Kota Pontianak melaksanakan halal bihalal sabtu tanggal 27 Oktober 2007 dihalaman Surau Almutahhroh kantor PDAM dihadiri seluruh jajaran staf, pejabat, 3 Direksi yaitu ; Dirut Syahril Japarin, Dirum, Dirtek serta keluarga besar PDAM Kota Pontianak dan para undangan serta menghadiri bapak Ustad Drs. Abdul Aziz, yang dalam ceramahnya jangan "selingkuh" yang sudah berkeluarga dan harmonisasi hubungan atasan dan bawahan harus dijaga. Ketika pak ustad mengulangi kalimat selingkuh karyawan dan karyawati tersenyum simpul. Baca Juga :   Pdam-kota-pontianak-milik-pemkot Selingkuh adalah perilaku melanggar komitmen hubungan, yang akhirnya melukai rasa percaya dalam sebuah hubungan romantis. Oleh karena itu, batasan selingkuh tiap pasangan bisa berbeda, tergantung pada komitmen hubungan mereka masing-masing. Misalnya, Sinta bisa saja berpendapat bahwa jika Rama menonton film porno, ia telah berselingkuh. Sementara menurut Budi, Ani berselingkuh jika melakukan hubungan seksual d...
9 komentar
🔗BACA SELENGKAPNYA »

Bagaimana Sikap Ulama Terhadap Kalimat Sufistik yang Melewati Batas?

🔓Owner Post Published 🕕
Penjelasan ulama terhadap kalimat sufistik yang tampak melewati batas  Dalam khazanah tasawuf kita sering mendengar ucapan para sufi yang tampak melewati batas dan kadang bertentangan dengan kaidah umum keislaman seperti yang terkenal Abu Yazid Al-Busthami, Al-Hallaj, Ibnu Arabi, atau Al-Jili. Bagaimana pandangan ulama perihal ini? Terima kasih. Wassalamu alaikum wr. wb. (Hamba Allah /Martapura) Jawaban Penanya yang budiman, semoga dirahmati Allah SWT.  Kalam-kalam yang tampak melewati batas itu bukan hanya dilontarkan oleh sufi, tetapi juga pernah oleh sahabat rasul seperti Sayyidina Umar, Sayyidah Aisyah, dan sahabat lainnya yang sebagian dikutip di sini. Sayyidina Umar pernah mengatakan, “Banjir Nuh dalam ratapanku seperti aliran air mata//Kobaran api Ibrahim seperti kepedihan hatiku yang terbakar oleh cinta. Kalau bukan embusan panjang napasku, niscaya aku tenggelam oleh air mata//tetapi sekiranya tanpa air mata, niscaya aku terbakar oleh napasku yang panas. Dukaku apa yan...
3 komentar
🔗BACA SELENGKAPNYA »

RAHASIA CARA JUALAN DALAM WAKTU SINGKAT

🔓Owner Post Published 🕕
Setiap pebisnis pasti ingin semua produknya laku terjual. Saya rasa Anda pun begitu kalau jadi seorang pebisnis. Apa penjualan Anda tapinya bisa dilakukan dengan cepat? Untuk ukuran pemula bisnis pasti perlu waktu yang sedikit lama saat melakukan penjualan produk. Saya akan memberikan langkah – langkah untuk Anda membuat Anda jualan dalam waktu singkat Buat langkah pertama Pertama – tama pastinya Anda harus melakukan pendekatan dulu ke calon pelanggan. Semakin cepat Anda berhasil menjadikan mereka pelanggan Anda, maka Anda akan cepat bertindak untuk membuat follow up. Anda sebaiknya melihat keterlibatan mereka dalam bisnis Anda. Apakah mereka sudah bergabung dalam situs online Anda, itu kalau Anda berbisnis online. Anda juga harus memerhatikan akses pelanggan ke website Anda mudah atau tidak. Memanfaatkan waktu terbaik pelanggan Apakah Anda sering menghubungi pelanggan lebih dari jam 5 sore? Itu sebaiknya Anda hindari karena pelanggan biasanya merasa terganggu apalagi di...
Posting Komentar
🔗BACA SELENGKAPNYA »

SOLUSI DARI SETIAP PERMASALAHAN

🔓Owner Post Published 🕕
Tidak ada satu pun dari manusia di dunia ini yang tidak memiliki masalah. Namanya juga hidup, selalu ada gejolak dan permasalahan yang akan muncul, selalu ada rintangan yang menghadang, selalu ada cobaan yang menguji. Sebagai manusia, tugas kita adalah menghadapi setiap permasalahan itu, dan menjalani hidup sebaik mungkinsebagai khalifah Allah di muka bumi. Sebenarnya, jika kita mau mempelajari Alquran dengan baik, Allah memberikan petunjuk atas setiap permasalahan kita dalam Alquran. Solusi setiap permasalahan yang berhubungan dengan rezeki, hubungan antar sesama, bahkan permasalahan yang sifatnya vertical yaitu hubungan kita dengan Allah. Jika kita dilanda permasalahan, bacalah Alquran dan carilah solusi dari permasalahan kita di dalamnya. Yakinlah, bahwa semua permasalahan kita akan segera berlalu, dan permasalahan yang sedang kita alami merupakan ujian dari Allah untuk mengangkat derajat kita ke tempat yang lebih tinggi, sebab Allah tidak akan pernah memberi ujian melebihi ...
Posting Komentar
🔗BACA SELENGKAPNYA »