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

TENTANG RUH-1

🔓Owner Post Published 🕕
Menurut ilmu Tasawwuf dalam kitab kitab makrifatullah pada diri manusia terdapat sembilan jenis Ruh. Masing-masing Ruh mempunyai fungsi masing masing. Ke sembilan macam Ruh yang ada pada manusia adalah sebagai berikut : 1. Ruh Idhofi Ruh idhofi adalah Ruh yang utama bagi manusia. Ruh Al-Hayat / Ruh segala sumber kehidupan. Ruh ini merupakan sumber dari 8 ruh-ruh lainnya. Ruh Idhofi juga disebut sebagai Jauhar awal suci, karena ruh inilah maka manusia dapat hidup. Bila ruh idhofi keluar dari tubuh, manusia akan mati. Disini Ruh Idhofi umumnya disebut sebagai nyawa. Ruh idhofi ini berada di alam wahdah karena ruh ini adalah pancaran langsung dari Nur Muhammad. Bentuk Ruh ini ghaib / tidak kasat mata / metafisik. Wujud Ruh ini mirip diri sendiri, baik rupa maupun suara serta segala sesuatunya. 2. Ruh Qudus Ruh qudus (Ruh yang paling Suci) : Ruh ini bagian dari Ruh idhofi. perbedaan Ruh qudus dengan Ruh idhofi adalah Ruh qudus hanya ditiupkan khusus pada makhluk ...
Posting Komentar
🔗BACA SELENGKAPNYA »

CARA MENJADI PEMIMPIN YANG BAIK

🔓Owner Post Published 🕕
KUNCI NYA 1. Beri contoh Pemimpin yang baik tidak hanya sekedar memberi perintah dan larangan tetapi juga harus memberi contoh. Jika kamu ingin anak buah disiplin dan bekerja keras maka lakukan juga hal yang sama. 2. Komunikasi yang baik Pemimpin harus bisa berkomunikasi secara tepat, mudah dimengerti, jelas dan tidak memberikan pengertian yang ambigu (dapat diartikan berbeda). 3. Bertanggung jawab. Pemimpin yang bijaksana harus mau menanggung kesalahan yang dilakukan oleh bawahannya dan tidak cuci tangan, karena adalah tanggung jawab Anda juga, jadi jangan cuci tangan bila ada hal kesalahan.  4. Jangan jatuh cinta dengan bawahan. Jika Anda menjadi seorang pemimpin di kantor, sebaiknya hubungan asmara dengan bawahan langsung tidak dilakukan. Alasannya adalah bila terjadi masalah internal dengan orang yg dicintai maka akan sulit berpikir rasional. 5. Kuasai bidang pekerjaan. Pemimpin yg baik harus mengerti s...
Posting Komentar
🔗BACA SELENGKAPNYA »

CARA MENGATASI RASA TAKUT BICARA DIDEPAN UMUM

🔓Owner Post Published 🕕
Mengatasi Rasa Takut Berbicara di Depan Umum Takut berbicara di depan umum adalah fobia yang umum. Hal ini dapat berkisar dari gugup ringan sampai dengan rasa takut dan panik yang melumpuhkan anda. Banyak orang yang takut berbicara di depan umum menghindari situasi untuk berbicara di depan umum sama sekali, atau mereka akan menderita melalui suara dan tangan yang bergetar. Namun sebetulnya dengan persiapan dan ketekunan, anda dapat mengalahkan rasa takut anda. Langkah-langkah dibawah ini dapat membantu: • Menguasai topik anda. Semakin baik anda memahami apa yang anda bicarakan – dan semakin anda peduli tentang topik tersebut – semakin kecil kemungkinan anda akan membuat kesalahan. Dan jika anda keluar dari jalur, anda akan dapat kembali dengan segera. Luangkan waktu untuk mempertimbangkan apa kira-kira pertanyaan para audiens yang akan dilontarkan dan siapkan jawaban anda. • Organisir segala sesuatu. Hati-hati dalam menyajikan informasi yang ingin anda sampaika...
Posting Komentar
🔗BACA SELENGKAPNYA »

MENGAPA GOSIP DIKANTOR MEMBUNUH PRODUKTIVITAS

🔓Owner Post Published 🕕
Mengapa Gosip di Kantor Membunuh Produktivitas? Bermula dari satu hal, satu orang ke orang lainnya lambat laun sebuah infomasi terus bertambah kontennya. Informasi tersebut akhirnya berubah menjadi gosip. Gosip di kantor merupakan hal yang tidak bisa dipastikan kebenarannya. Seringkali hal tersebut justru dimulai dari rasa iri hati, frustrasi, kurang percaya diri, bahkan yang terburuk adalah candaan semata. Itu tentu saja berdampak sangat buruk. Tidak hanya bagi orang yang menjadi bahas pembicaraan, namun juga bagi pembicara. Jika diibaratkan dengan sepasang kayu dan paku. Paku sebagai rumor buruk yang Anda bicarakan dan kayu sebagai orang yang dibicarakan. Anda memukulkan paku tersebut kepada kayu hingga menyakitinya. Bahkan meskipun Anda telah mencabut paku tersebut, lubang tersebut masih saja tersisa. Seperti inilah luka yang diakibatkan oleh rumor buruk yang Anda perbuat terhadap seseorang. Membicarakan hal buruk mengenai sesama kita dapat menyebabkan sakit hati bagi s...
Posting Komentar
🔗BACA SELENGKAPNYA »

TIPS PENTING DALAM MEMULAI BISNIS DENGAN TOKO ONLINE

🔓Owner Post Published 🕕
Tips Penting Dalam Memulai Bisnis dengan Toko Online  Untuk memulai bisnis hal yang perlu pertama kali anda harus ketahui adalah bagaimana meletakkan Mindset anda yang benar pada bisnis tersebut.  Dan begitupun dengan bisnis toko online atau Dropshipping atau secara umum bisnis yang menjual produk dengan menggunakan Toko online. Agar bisnis anda bisa berjalan sebagaimana mestinya sesuai dengan hasil yang Anda harapkan. Berikut Tips penting yang perlu Anda pelajari untuk memulai bisnis dengan toko online ataupun dropshipping : 1. Siap Melayani Sang “Raja” Persiapan mental Anda untuk melayani pembeli seperti yang kita sering kita dengar “Pembeli Adalah Raja” itu ada benarnya tapi tidak seutuhnya benar apalagi pembeli yang juga tidak beretika.  Nah dalam hal ini Anda harus benar benar siap melayani (Menjawab pertanyaan, Ingin di respon cepat dan produk yang sesuai harapan) dan mempersiapkan hal yang apa saja yang akan membantu dalam hal Ini, misalnya Hp yang d...
Posting Komentar
🔗BACA SELENGKAPNYA »