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 »

TUJUH KUNCI SUKSES TEAMWORK DALAM BISNIS

🔓Owner Post Published 🕕
Teamwork Sukses sebagai Kunci Kesuksesan Bisnis Ada kunci dalam suatu teamwork yang memegang peranan yang sangat vital supaya menjadi teamwork sukses di dalam proses keterkaitan dan keterikatan setiap anggotanya. Tanpa kerja sama yang benar dari semua anggota, sangat mustahil organisasi akan menjadi langgeng dan mencapai sukses. Berikut beberapa kunci sukses dalam suatu teamwork, antara lain : 1. Komitmen Penuh Komitmen merupakan suatu tekad yang kuat untuk mewujudkan tujuan yang ingin dicapai dalam organisasi. Komitmen dapat dijadikan sebagai pembuka untuk awal dari kerja sama, sekaligus sebuah penutup untuk mencapai tujuan. Dengan komitmen yang penuh, semua anggota akan berupaya dalam memberikan kontribusi yang terbaik dan sekuat tenaga demi mewujudkan kejayaan bersama. 2. Empati dan Mendengarkan Kemampuan dalam bersikap empati terhadap anggota yang lain dan mendengarkan semua pendapat merupakan awal dari komunikasi yang benar. Seorang pemimpin dapat memberikan p...
Posting Komentar
🔗BACA SELENGKAPNYA »

Privacy Policy

🔓Owner Post Published 🕕
Kebijakan Privasi SUARA HARIAN OTO BEMO BERODA TIGA Di SUARA HARIAN OTO BEMO BERODA TIGA, dapat diakses dari https://otobemoberodatiga.blogspot.com, salah satu prioritas utama kami adalah privasi pengunjung kami. Dokumen Kebijakan Privasi ini berisi jenis informasi yang dikumpulkan dan dicatat oleh SUARA HARIAN OTO BEMO BERODA TIGA dan bagaimana kami menggunakannya. Jika Anda memiliki pertanyaan tambahan atau memerlukan informasi lebih lanjut tentang Kebijakan Privasi kami, jangan ragu untuk menghubungi kami. File Log SUARA HARIAN OTO BEMO BERODA TIGA mengikuti prosedur standar menggunakan file log. File-file ini mencatat pengunjung ketika mereka mengunjungi situs web. Semua perusahaan hosting melakukan ini dan merupakan bagian dari analisis layanan hosting. Informasi yang dikumpulkan oleh file log termasuk alamat protokol internet (IP), jenis browser, Penyedia Layanan Internet (ISP), cap tanggal dan waktu, halaman rujukan/keluar, dan mungkin jumlah klik. Ini tidak terkait dengan infor...
Posting Komentar
🔗BACA SELENGKAPNYA »

CARA MEMBUAT FOOTER BAWAH SEDERHANA YANG ELEGAN DINAMIS UNTUK TEMPLATE BLOGGER

🔓Owner Post Published 🕕
VARIAN TERBARU DENGAN CSS SUARA HARIAN OTO BEMO BERODA TIGA Memang sudah masanya meninggalkan template lama. Itu sudah hampir menjadi masa lalu. Ya gayanya, ya struktur penulisannya ya versi layoutnya. Pokoknya semuanya memang berasal dari masa lalu. Karena sudah hukum alam yang lama lama menjadi usang, ketinggalan fitur dan model, untuk kemudian perlahan lahan di gantikan oleh yang baru. Contoh template klasik generasi pertama, blogger mana yang mau bunuh diri menggunakannya kembali? Salah satu artikel tampilan footer editblogtema yuk ! kita mulai praktekan cucuk cabut, otak ataik, pasang bongkar bahasa alogaritma editblogtema emang jagonya coding, Berulangkali saya membaca akhirnya jatuh hati.   Kini seperti kita sudah maklum, Google melalui bloggernya telah menyediakan 5 varian template terbaru versi kedua dengan layout versi 3, yakni: Contempo Soho Emporio Notable Essential Mereka telah mengadopsi gaya kekinian. Mereka masuk syarat sebagai template mobile dan lulus pengujian ba...
Posting Komentar
🔗BACA SELENGKAPNYA »