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

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 »

DELAPAN TANDA ANDA HARUS RESIGN SECEPATNYA DARI TEMPAT ANDA BEKERJA

🔓Owner Post Published 🕕
Saat harus resign dari perusahaan tempat kita bekerja bukanlah pilihan yang mudah. Terutama untuk karyawan yang sudah bertahan selama bertahun-tahun di perusahaan tersebut. Namun ada kalanya Anda harus resign demi masa depan yang lebih baik. Anda pasti punya cita-cita untuk jadi sukses, bukan? Kadang, peluang karier yang lebih baik hanya bisa didapatkan dengan mengundurkan diri dari perusahaan lama, dan mencari yang baru. Seperti dikutip dari DuitPintar.com, kenali dulu delapan tanda Anda harus resign secepatnya dari tempat Anda bekerja sekarang. 1. Masa depan perusahaan makin suram Waspada bila pemasukan perusahaan menurun drastis hingga mencapai 70 persen selama lebih dari tiga bulan. Dewan direksi pun setiap tahun selalu mengalami pergantian, tapi tak ada yang punya solusi jitu untuk perusahaan. Tidak ada inovasi juga yang bisa dilakukan oleh para petinggi perusahaan. Sebagian besar manajer dan group head mulai resign satu persatu. Kalau ini terjadi di p...
Posting Komentar
🔗BACA SELENGKAPNYA »

NUR MUHAMMAD ADALAH CAHAYA ATAU RUH

🔓Owner Post Published 🕕
Hakekat Nur Muhammad ini perlu diterangkan lebih lanjut agar bisa difahami semuanya. Apa itu Nur Muhammad, dan apa hubungannya dengan diri nabi Muhammad, dan apa hubungannya dengan diri manusia. Dalam ranah hakikat, Nabi Muhammad dan Nur Muhammad itu berbeda. Nabi Muhammad adalah manusia. Anak dari seorang ayah bernama Abdullah dan ibunya bernama Aminah. Lahirnya di Mekah dan makamnya di Madinah. Tetapi hakekat "Nur Muhammad" adalah cahaya atau ruh, jiwa yang tunggal, jiwa jiwa yang terpuji. Hakekat Nur Muhammad itu ada dalam diri tiap tiap manusia, ada dalam diri kalian semua, sebagaimana ada dalam diri para nabi-nabi Allah dan rasul rasulNya, serta wali-wali Allah. Nur Muhammad itu hanya ada satu namun ada dalam diri semua umat manusia, jika engkau pakai akalmu, bisa bingung, bagaimana bisa ada satu hal namun ada dalam tiap manusia yang jumlahnya milyaran?? Lalu apa hubungannya antara Nur Muhammad itu dengan diri nabi Muhammad?? Diri nabi Muhammad ...
2 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 »

ISLAM ITU SATU

🔓Owner Post Published 🕕
Islam Itu Satu. Jika kita melihat diantara umat islam saat ini, kita semua sama-sama mempelajari islam dari Al-Qur'an dan Hadist, namun hasil pemahamannya bisa beda-beda. Ada banyak versi cara orang memahami ajaran islam, sehingga melahirkan banyak versi keislaman. Dan lahirlah perbedaan kelompok dan golongan. Dimulai dari pemahaman islam dalam perbedaan golongan antara sunni, sufi, salafi, syiah, dll.. hingga perbedaan cara memahami islam yang paling radikal sampai liberal, ada yang menjadi semakin baik, lembut, santun dan berakhlak mulia, namun ada juga yang malah menjadi semakin extreme. Padahal islam itu mestinya satu dan sumbernya sama, tapi kenyataanya cara kita memahami dan memaknainya bisa bermacam-macam. Ini semua menunjukkan bahwa walaupun kita mempelajari dari satu sumber yang sama, tapi bisa jadi memiliki hasil yang  berbeda. Islam turun didunia ini seperti memiliki dua sisi sekaligus yaitu madu dan racun, dahulu saya menulis bahwa seorang mukmin it...
Posting Komentar
🔗BACA SELENGKAPNYA »