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

TEAM WORK ADALAH RAHASIA BISNIS BISA BERTAHAN LAMA

🔓Owner Post Published 🕕
Team work merupakan pondasi suatu bisnis. Sukses tidaknya bisnis akan bergantung pada kondisi team worknya. Definisi Team work adalah kerja tim, yaitu serangkaian sikap dan perilaku dari orang-orang yang tergabung dalam sebuah tim. Team work inilah yang nantinya akan menentukan perjalanan dari suatu bisnis. Manfaat yang diperoleh dengan adanya Team work antara lain, dalam hal pemecahan masalah. Adanya team work membuat suatu bisnis menjadi lebih cepat dan lebih baik dalam mengambil keputusan. Hal ini akan diperoleh dari kerja tim yang baik. Pada dasarnya keputusan yang diambil dari pemikiran banyak orang hasilnya lebih baik dibandingkan pemikiran dari satu orang, dengan catatan adanya rasa saling menghargai pendapat orang lain dan tidak egois. Manfaat kedua adalah dalam hal menyelesaikan pekerjaan. Suatu pekerjaan akan selesai dengan cepat jika dikerjakan secara bersama-sama. Tim yang baik akan membagi setiap pekerjaan kepada seluruh anggota timnya sesuai dengan kemampuan a...
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 »

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 »

DIRI SEBENAR DIRI

🔓Owner Post Published 🕕
Berkatalah Arifbillah: DIRI SEBENAR DIRI itu ialah : BADAN AKAL ROH SIRR (rahasia) NUR (cahaya) HAKIKAT (Zat yang Mutlak) DIRI TERPERI itu ialah : DIRI yg mengikut segala perintah yaitu SIFAT ADAM (sifat kita). Yang senantiasa mengikut segala perintah daripada yang sebenar-benar DIRI yaitu ZAT MUTLAK. DIRI TERDIRI itu ialah : Antara ZAT dengan SIFAT antara ALLAH dan MUHAMMAD SIFAT berdiri pada ZAT walaupun berlainan tapi tidak bersalahan, tiada yg lain melainkan DIA jua. Inilah yg wajib kita NAFIKAN, ibarat CAHAYA MATAHARI daripada MATAHARI. Tapi bukanlah CAHAYA itu MATAHARI, atau MATAHARI itu CAHAYA, jadi kita itu ibarat sandaran DIA saja. Inilah yg dikatakan tidak BERCERAI dan tidak pula BERSEKUTU. dalam NAFI ada mengandung ISBAT. DIRI TAJALLI itu ialah : DIRI yg senantiasa hadir didalam PENGLIHATAN kita (marifat kita) Disinilah kita membuat PENGAKUAN, dengan sebenar-benar PENGAKUAN, bahwa ALLAH itu : seZAT, seSIFAT, seASM...
Posting Komentar
🔗BACA SELENGKAPNYA »

KEKUASAAN POLITIK

🔓Owner Post Published 🕕
Dalam teori politik menunjuk pada kemampuan untuk membuat orang lain melakukan sesuatu yang tidak dikehendakinya. Max Weber menuliskan adanya tiga sumber kekuasaan: pertama dariperundang-undangan yakni kewenangan;  kedua, dari kekerasan seperti penguasaan senjata; ketiga, dari karisma. Menguraikan konsep kekuasaan politik kita perlu melihat pada kedua  elemennya, yakni kekuasaan dari akar kata kuasa dan politik yang berasal dari bahasa Yunani Politeia (berarti kiat memimpin kota (polis) ). Sedangkan kuasa dan kekuasaan kerapa dikaitkan dengan kemampuan untuk membuat gerak  yang tanpa kehadiran kuasa (kekuasaan) tidak akan terjadi, misalnya kita bisa menyuruh adik kita berdiri yang tak akan dia lakukan tanpa perintah  kita (untuk saat itu) maka kita memiliki kekuasaan atas adik kita. Kekuasaan politik dengan demikian adalah kemampuan untuk membuat masyarakat dan negara membuat keputusan yang tanpa kehadiran kekuasaan tersebut tidak akan dibuat oleh mereka. ...
Posting Komentar
🔗BACA SELENGKAPNYA »