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

KISAH PEMUDA MENCARI TUHAN

🔓Owner Post Published 🕕
Pada suatu masa, hidup seorang pemuda yang hidupnya senang menuntut ilmu, mempelajari agama pada syekh-syekh terkenal dan sering mendatangi ‘ulama-ulama yang sangat alim, seberapapun jauhnya jarak rumah orang alim itu. Karena kecerdasannya, semua guru-guru pemuda ini mengaguminya, beberapa bidang ilmu agama yang berat dapat dikuasainya dengan sempurna. Dan Kitab-kitab tulisan para Ulama-ulama pendahulupun telah ia hapal. Dalam puncak pembelajarannya, tiba-tiba si pemuda mendatangi salah satu gurunya yang paling ia hormati, menyampaikan satu urusan yang terganjal di hatinya dan ingin merealisasikannya: Bertemu Tuhan ! “Saya mau mencari-Nya. Saya mau bertemu dengan-Nya, bukan dalam arti kiasan, tapi yang sedzahirnya. Izinkan saya pergi mencari-Nya”. Syech gurunya yang menyadari siapa yang dihadapinya langsung mengizinkannya, dan berdo’a semoga selamat dalam perjalannya dan kembali dengan berita yang menggembirakan. Singkat cerita si Pemuda memulai perjalanan panja...
Posting Komentar
🔗BACA SELENGKAPNYA »

UPAYA DAN MENJAGA SELF DISCIPLINE

🔓Owner Post Published 🕕
Disiplin merupakan pendewasaan dimana seseorang dituntut untuk bisa berfikir logis, menyelesaikan masalahnya dengan baik, serta tidak selalu bergantung pada orang lain. Pada intinya, disiplin berhubungan dengan cara bersikap dan bertingkah laku sesuai kondisi riil dimasyarakat. Menurut Charles Schaefer inti dari disiplin ialah mengajar atau seseorang mengikuti ajaran dari orang lain yang mengikuti ajaran seorang pemimpin. Selain itu, disiplin juga dapat diartikan latihan batin dan watak dengan maksud supaya segala perbuatan selalu mentaati tata tertib. Jadi, disiplin adalah mentaati aturan sesuai dengan ketentuan umum yang berlaku. Dari dua pengertian tersebut, sangat jelas bahwa disiplin memiliki peranan penting dalam sebuah keberhasilan atau kesuksesan. Hal ini disebabkan disiplin pada dasarnya mengatur aspek perilaku. Maka, dapat diketahui bahwa tujuan dari bersikap disiplin dapat dibagi menjadi jangka pendek dan panjang. Tujuan jangka pendek sikap disiplin ialah membuat ...
Posting Komentar
🔗BACA SELENGKAPNYA »

MENJAGA INTERGRITAS DIRI DISETIAP SITUASI

🔓Owner Post Published 🕕
Ada sebuah kisah menarik yang mugkin pernah anda jumpai di lingkungan sekitar. Suatu hari, ada seorang ibu yang membeli makanan ringan di mini market. Harga makanan ringan yang dibelinya sebesar Rp 23.500,00. Iya membayar dengan memberikan selambar uang Rp 50.000,00. Kasir kemudian memberikan uang kembalian Rp 28.500,00. Tanpa menghitung ulang, ibu tersebut beranjak dengan membawa belanjaannya. Sesampai di rumah, ibu tersebut menghitung uang kembalian yang ternyata kelebihan Rp 2.000,00. Meskipun cukup jauh dari rumah, ibu itu kembali ke mini market untuk mengembalikan kelebihan uang kembaliannya. Inilah kisah nyata yang mungkin pernah anda temukan dalam kehidupan. Di sinilah integritas itu diuji.   Berdasarkan kisah tersebut dapat disimpulkan bahwa integritas berhubungan dengan jati diri. Integritas menunjukkan kesejatian (kemurnian), bukan kemunafikan atau kepura-puraan. Integritas adalah suatu sikap dimana seseorang tetap melakukan hal yang benar dalam berbagai situasi se...
Posting Komentar
🔗BACA SELENGKAPNYA »

BETINDAK LOKAL BERFIKIR GLOBAL

🔓Owner Post Published 🕕
‘’ Bertindak local, berfikir global!’’ Bahasa ini mungkin sering anda dapatkan, baik dimedia audio maupun visual.   Namun demikian, pemahaman atau maksud kalimat tersebut sering kali dianggap enteng. Anda tentu sudah mengetahui budaya pikir masyarakat Indonesia pada umumnya lebih mengedepankan hati (perasaan) dibanding dengan akal (logika). Falfasah hidup yang dilestarikan didalam masyarakat adalah memandang hidup ini cuma sebentar. Berpegang pada falsafah hidup tersebut, masyarakat memandang makna hidup adalah menjalani kehidupan sebagaimana tugas. Namun, tidak sedikit masyarakat yang keliru memaknai falsafah bijak tersebut. Sebagian masyarakat memaknai falsafah hidup yang cuma sebentar secara harfiah. Akibatnya, mereka mereka merasa tidak perlu bersusah- susah dalam menjalaninya. Kekeliruan dalam memberikan makna terhadap falsafah hidup tersebut turut dipengaruhi pemikiran-pemikiran baru yang hadir bersama arus globalisasi. Dalam hal ini, arus globalisasi bergerak sem...
Posting Komentar
🔗BACA SELENGKAPNYA »

LIMA CIRI PALING UTAMA PERUSAHAAN AKAN BANGKRUT

🔓Owner Post Published 🕕
Di tengah semakin berubahnya konteks persaingan bisnis, maka mengetahui ciri-ciri perusahaan hendak bangkrut menjadi penting, baik itu bagi karyawan maupun bagi pemilik bisnis. Pengetahuan ini, penting agar perusahaan tidak terlanjur bangkrut, atau bagi karyawan, mengetahui bisnis sudah siap-siap bangkrut bisa memberi kontribusi maksimal agar perusahaan tidak bangkrut. Atau jika memang kebangkrutan sudah tidak bisa dihindarkan, sebagai karyawan perlu mempersiapkan Plan B, artinya siap-siap angkat koper dari perusahaan lama, menuju perusahaan baru yang lebih menjanjikan. Tentu ada banyak ciri sebuah bisnis atau perusahaan akan bangkrut, nah setidaknya inilah 5 ciri yang paling utama. 1. Cash Flow yang Rendah Cash flow yang rendah biasanya disumbang oleh penjualan yang rendah. Kesulitan bersaing dengan kompetitor, bisa menyebabkan penjualan menurun, marjin keuntungan tergerus, hingga produk betul-betul menyumbangkan kerugian, karena terpaksa harus dijual dibawah ongkos produ...
Posting Komentar
🔗BACA SELENGKAPNYA »