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

TIGA GAGASAN MEMBANTU MENDAPATKAN MANFAAT MAKSIMUM

🔓Owner Post Published 🕕
Di bawah ini adalah tiga  gagasan yang akan membantu Anda mendapatkan manfaat maksimum dari buku ini: 1. Baca seluruh artikel sesegera mungkin. Akan tetapi, jangan membaca dengan terlalu cepat. Biarkan tiap gagasan dan tiap prinsip meresap sehingga Anda dapat melihat secara persis bagaimana gagasan dan prinsip tersebut berlaku bagi Anda. 2. Berikutnya, habiskan satu minggu untuk mempelajari, benar-benar mempelajari, tiap bab. Rencana yang bagus sekali adalah menuliskan di atas sepotong kartu kecil prinsip yang diringkas pada akhir tiap tulisan. Tiap pagi selama seminggu katakan kepada diri Anda sendiri, "Hari ini, saya akan menerapkan prinsip-prinsip ini." Kemudian, baca ulang. Bawa kartu tersebut bersama Anda. Sepanjang hari bersangkutan baca kartu tersebut beberapa kali. Tiap malam tinjau seberapa baik Anda sudah berhasil dalam menerapkan tiap prinsip. Buat resolusi untuk bekerja lebih baik lagi besok. 3. Sesudah Anda menghabiskan waktu seminggu dengan tiap ...
Posting Komentar
🔗BACA SELENGKAPNYA »

EMPAT HAL SEBENARNYA YANG DIINGINKAN PELANGGAN

🔓Owner Post Published 🕕
Angkat tangan yuk yang setuju kalau pelanggan itu jantung bisnis Anda! Tahukan pasti jantung itu bersangkutan dengan nyawa. So, pelanggan itu nyawa bagi bisnis. sudah seharusnya bisnis Anda memberikan kepuasan bagi pelanggan. Pelayanan prima yang Anda berikan! Anda harus tahu yang diinginkan Pelanggan apa lagi dalam pelayanan. Anda merasa kesusahan? Memang butuh waktu yang sedikit panjang buat Anda memahami karakteristik pelanggan. “Memahami saya” Setiap orang pasti ingin dipahami tentu termasuk Anda dan saya. Konsumen pastinya juga ingin sebuah bisnis mengetahui kebutuhannya. Anda memang bisa mendapat informasi dari survei. Namun, konsumen akan lebih senang kalau hasil survei bukan hanya sekedar survei. Konsumen butuh bukti dari survei yang dilakukan bisnis Anda. Apakah Anda ingin konsumen menjadi pelanggan setia? Berarti Anda perlu menjadi seperti konsumen. Dengan bersikap seperti konsumen Anda akan tahu kebutuhan dan keinginan mereka. “Melindungi saya” Saat me...
Posting Komentar
🔗BACA SELENGKAPNYA »

LIMA HAL PENENTU KEBERHASILAN BISNIS STARTUP

🔓Owner Post Published 🕕
Alexander Osterwalder & Yves Pigneur melalui bukunya Business Model Generation memaparkan bahwa setidaknya ada 9 elemen penentu model bisnis yaitu , relasi pelanggan, saluran komunikasi, penawaran, segmen pasar, arus penjualan, aktivasi kunci, sumber daya kunci, mitra kunci, hingga struktur biaya. Tanpa ada salah satu elemen di dalamnya maka bisnis akan jadi sangat rapuh dan mudah goyang serta bangkrut ketika diterpa masalah. Sebagai pebisnis pemula atau yang lebih banyak dikenal dengan pebisnis startup, tentu harus bermula dari konsep yang benar, pondasi yang kokoh, semangat prima dan team yang solid. Masing-masing bagian dari bisnis ini tidak boleh rapuh dan harus menopang satu sama lain. Apalagi soal pelayanan terhadap pelanggan CBInsights menunjukkan hasil risetnya bahwa sebagaian besar pebisnis startup gagal karena mereka tidak bisa melayani kebutuhan pasar. Ada 42% dari jumlah founder start up yang diteliti mengakui hal ini. Sedangkan 29% lainnya mengakui kare...
Posting Komentar
🔗BACA SELENGKAPNYA »

TUJUAN KOMUNIKASI VERBAL

🔓Owner Post Published 🕕
TUJUAN KOMUNIKASI VERBAL :  Komunikasi verbal melalui lisan dapat dilakukan secara langsung bertatap   muka antara komunikator dengan komunikan, seperti berpidato atau ceramah.   Selain itu juga, komunikasi verbal melalui lisan dapat dilakukan dengan  menggunakan media, contoh seseorang yang bercakap-cakap melalui telepon.  Sedangkan komunikasi verbal melalui tulisan dilakukan dengan secara tidak   langsung antara komunikator dengan komunikan. Proses penyampaian informasi   dilakukan dengan menggunakan berupa media surat, lukisan, gambar, grafik   dan lain-lain. Adapun tujuan menggunakannya komunikasi verbal (lisan dan tulisan) antara   lain : Penyampaian penjelasan, pemberitahuan, arahan dan lain sebagainya, Presentasi penjualan dihadapan para audien, Penyelenggaraan rapat, Wawancara dengan orang lain, Pemasaran melalui telepon, dan sebagainya. Baca juga  Praktek-komunikasi-verbal
Posting Komentar
🔗BACA SELENGKAPNYA »

EMPAT BISNIS RUMAHAN YANG DIGEMARI KAUM IBU RUMAH TANGGA

🔓Owner Post Published 🕕
4 Bisnis Rumahan yang Digemari Kaum Ibu Rumah Tangga Kaum ibu atau perempuan yang sudah berumah tangga biasanya disibukkan dengan rutinitas mengurus rumah tangga saja.  Namun ada banyak hal yang bisa dilakukan para ibu rumah tangga untuk membantu keuangan keluarga tetapi tanpa meninggalkan tugas pokoknya sebagai ibu rumah tangga tentunya dengan modal yang tidak terlalu besar.  Berikut beberapa Bisnis Rumahan yang di gemari kaum ibu tersebut: Usaha Jasa Memasak Usaha jasa memasak ini juga bisa jadi pemasukan untuk keuangan keluarga, kalau anda suka atau hobi memasak tidak salah kalau hobi anda dituangkan ke dunia usaha. Mulailah dari yang kecil dan sederhana, Misal Membuat aneka kue, seperti Sus, Pastel, Risolis, Lemper.  Untuk pemasaran awal bisa kita tawarkan kepada tetangga, atau membuka display kecil di depan rumah. Cara lain bisa kita tawarkan untuk pemesanan dengan Box, misal untuk kegiatan pengajian, acara rapat, pesta kecil-kecilan dan...
Posting Komentar
🔗BACA SELENGKAPNYA »