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

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

POPULAR POST

PRESIDEN REPUBLIK INDONESIA KE 5

BIOGRAFI MEGAWATI  Masa jabatan 23 Juli 2001 – 20 Oktober 2004 Presiden  Republik Indonesia ke-5, Megawati Soekarnoputri lahir di Yogyakarta, 23 Januari 1947. Sebelum diangkat sebagai presiden, beliau adalah Wakil Presiden RI yang ke-8 dibawah pemerintahan Abdurrahman Wahid. Megawati adalah putri sulung dari Presiden RI pertama yang juga proklamator, Soekarno dan Fatmawati. Megawati, pada awalnya menikah dengan pilot Letnan Satu Penerbang TNI AU, Surendro dan dikaruniai dua anak lelaki bernama Mohammad Prananda dan Mohammad Rizki Pratama. Pada suatu tugas militer, tahun 1970, di kawasan Indonesia Timur, pilot Surendro bersama pesawat militernya hilang dalam tugas. Derita tiada tara, sementara anaknya masih kecil dan bayi. Namun, derita itu tidak berkepanjangan, tiga tahun kemudian Mega menikah dengan pria bernama Taufik Kiemas, asal Ogan Komiring Ulu, Palembang. Kehidupan keluarganya bertambah bahagia, dengan dikaruniai seorang putri Puan Maharani. Kehidupan mas...

PARA JENDERAL MENGIKUTI PILKADA SERENTAK 2018

Sejumlah jenderal aktif di kesatuan TNI dan Kepolisian RI dikabarkan akan mengikuti Pilkada Serentak 2018 . Setidaknya ada lima jenderal yang sudah siap berlaga di ajang lima tahunan tersebut. Berkaitan dengan hal tersebut, pengamat politik dari Lembaga Ilmu Pengetahuan Indonesia, Siti Zuhro, mengatakan majunya para jenderal aktif itu merupakan fenomena baru di Indonesia. Sebab, menurut dia, selama ini yang maju dalam Pilkada merupakan para jenderal yang sudah pensiun. “Saat ini partai gagal melakukan kaderisasi, maka menunjuk jenderal aktif yang punya jiwa kepemimpinan dan jaringan.”  Fenomena tersebut mengkhawatirkan. Sebab, dikhawatirkan terjadi kecurangan dalam pilkada akan lebih merajalela dengan fenomena tersebut. Misalnya munculnya penekanan di daerah-daerah untuk memilih calon tertentu atau tidak dilanjutkannya sengketa pemilihan dari Badan Pengawas Pemilihan Umum oleh Polri. Semua itu, bisa terjadi karena berpihaknya Polri dan TNI untuk memenangkan bekas ...

PRESIDEN REPUBLIK INDONESIA KE 1

BIOGRAFI Ir. SOEKARNO MASA JABATAN 1945 - 1966 Presiden pertama Republik Indonesia, Soekarno yang biasa dipanggil Bung Karno, lahir di Blitar, Jawa Timur, 6 Juni 1901 dan meninggal di Jakarta, 21 Juni 1970. Ayahnya bernama Raden Soekemi Sosrodihardjo dan ibunya Ida Ayu Nyoman Rai. Semasa hidupnya, beliau mempunyai tiga istri dan dikaruniai delapan anak.  Dari istri Fatmawati mempunyai anak Guntur, Megawati, Rachmawati, Sukmawati dan Guruh. Dari istri Hartini mempunyai Taufan dan Bayu, sedangkan dari istri Ratna Sari Dewi, wanita turunan Jepang bernama asli Naoko Nemoto mempunyai anak Kartika. Masa kecil Soekarno hanya beberapa tahun hidup bersama orang tuanya di Blitar. Semasa SD hingga tamat, beliau tinggal di Surabaya, indekos di rumah Haji Oemar Said Tokroaminoto, politisi kawakan pendiri Syarikat Islam. Kemudian melanjutkan sekolah di HBS (Hoogere Burger School).  Saat belajar di HBS itu, Soekarno telah menggembleng jiwa nasion dalismenya. Selepas lulus HBS tahun 1920...

SUARA HARIAN OTO BEMO BERODA TIGA

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...

Bagaimana Sikap Ulama Terhadap Kalimat Sufistik yang Melewati Batas?

Penjelasan ulama terhadap kalimat sufistik yang tampak melewati batas  Dalam khazanah tasawuf kita sering mendengar ucapan para sufi yang tampak melewati batas dan kadang bertentangan dengan kaidah umum keislaman seperti yang terkenal Abu Yazid Al-Busthami, Al-Hallaj, Ibnu Arabi, atau Al-Jili. Bagaimana pandangan ulama perihal ini? Terima kasih. Wassalamu alaikum wr. wb. (Hamba Allah /Martapura) Jawaban Penanya yang budiman, semoga dirahmati Allah SWT.  Kalam-kalam yang tampak melewati batas itu bukan hanya dilontarkan oleh sufi, tetapi juga pernah oleh sahabat rasul seperti Sayyidina Umar, Sayyidah Aisyah, dan sahabat lainnya yang sebagian dikutip di sini. Sayyidina Umar pernah mengatakan, “Banjir Nuh dalam ratapanku seperti aliran air mata//Kobaran api Ibrahim seperti kepedihan hatiku yang terbakar oleh cinta. Kalau bukan embusan panjang napasku, niscaya aku tenggelam oleh air mata//tetapi sekiranya tanpa air mata, niscaya aku terbakar oleh napasku yang panas. Dukaku apa yan...