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

IMAM GHAZALI 40 JILID KITABNYA MUSNAH DIBAKAR

Imam Ghazali, 40 Jilid Kitabnya Musnah Dibakar  Di kalangan para sufi, Imam Ghazali adalah ikon tersendiri. Ia sangat produktif, sementara karya-karyanya sungguh luar biasa. Dalam beberapa tulisannya, tasawuf disuguhkan dalam penalaran dan argumentasi yang sungguh mencengangkan. Hampir semua karyanya menjadi rujukan dan bahan penelitian hingga kini. Bagi Ghazali, tasawuf merupakan himpunan antara akidah, syariat dan akhlak. Baginya perjalanan spritual seseorang mampu menjernihkan hati secara berkesinambungan sehingga mencapai tingkat Musyahadah (kesaksian). Menurut Ghazali, kehidupan seorang muslim tidak dapat dicapai dengan sempurna kecuali dengan mengikuti jalan Allah yang di lalui secara bertahap. Tahapan itu antara lain tobat, sabar, kefakiran, zuhud, tawakal, cinta dan makrifat. Setelah ketujuh tahapan itu, manusia memperoleh Ridla. Oleh karena itu seseorang yang mempelajari taawuf wajib mendidik jiwanya. Lebih dari itu juga harus mendidik akhlaknya. Menurut dia,...

TIPS MERAIH SUKSES BEBAS FINANSIAL

Tips Meraih Sukses Bebas Finansial Belum tentu orang yang sangat kaya merasakan kebebasan finansial. Bisa jadi, dia malah merasa tertekan untuk terus mengumpulkan uang demi mempertahankan gaya hidupnya. Kemudian timbul pertanyaan, apakah kebebasan finansial yang sesungguhnya? Kebebasan finansial adalah ketika Anda tahu bahwa uang yang Anda miliki cukup untuk memenuhi kebutuhan dasar. Maka dari itu melalui tulisan ini kami akan ungkapkan, Teknik Meraih Sukses Bebas Finansial yang bisa Pembaca lakukan, yaitu: 1. Pengeluaran harus lebih rendah dibanding pemasukan Jangan hidup di luar kemampuan Anda. Lazimnya, 30 persen dari penghasilan Anda harus ditabung dan sisanya dipergunakan untuk keperluan sehari-hari. Jika ini berarti Anda harus hidup sederhana, tidak mengapa.  Berutang untuk memenuhi hasrat konsumtif malah akan membebani hidup Anda, karena semua utang ataupun kredit tidak terlepas dari yang namanya bunga. 2. Milikilah rencana, dan buatlah s...

BAGAIMANA CARA MENJADI PEMIMPIN YANG DISEGANI DAN BERWIBAWA

a. Jiwa Kepemimpinan Kalau ingin menjadi seorang pemimpin yang disegani dan berwibawa, seorang pemimpin harus mempunyai  jiwa kepemimpinan. Jiwa kepemimpinan sangat diperlukan oleh seorang pemimpin karena nantinya pemimpin akan menjadi terdepan dan menjadi panutan bagi yang dipimpinnya.  Untuk itu di butuhkan jiwa kepemimpinan yang tidak perlu di ragu kan lagi kepemimpinan nya. b. Management yang handal Menguasai dan mengerti akan  management yang handal , agar dalam memimpin sudah punya konsep atau ciri khas yang baik dan tersusun. Baik management jangka pendek, jangka menengah atau jangka panjang kalau sudah tersusun secara handal dan rapi maka seorang pemimpin agan cepat berhasil.  Kalau sudah berhasil maka dengan sendirinya akan disegani dan berwibawa. c. Sopan dan santun Seorang pemimpin juga harus punya sikap  sopan dan santun  sebagai contoh bagi yang dipimpinnya.  Karena dengan sikap dan santun yang terpuji maka dengan sen...

MENYIKAPI JADZAB WALI ALLAH

Menyingkap Jadzab Dalam khazanah kesusasteraan Jawa kita mengenal yang namanya Suluk Linglung yang merupakan nama lain dari Suluk Syaikh Malaya. Karya sastra yang diperkiran buah tangan Pangeran Kadilangu tersebut merupakan adaptasi dari Serat Dewa Ruci gubahan Yasadipura I, embah canggah sang pujangga penutup pengarang Serat Jayengbaya: Ronggawarsita. Alkisah, Syaikh Malaya—yang secara harfiah berarti mlaku atau berjalan—yang merupakan gelar lain Sunan Kalijaga, hendak menunaikan ibadah haji. Tapi, di ambang sadarnya, ia dijumpai oleh Nabi Khidhir di mana dalam Serat Dewa Ruci di sebut sebagai Sang Marbudengrat alias Dewa Ruci. Saya tak akan menceritakan ulang kisah suluk yang dalam arti sebenarnya adalah perjalanan ruhani tersebut. Banyak orang telah paham tentang kisah pencarian dan pertemuan Bima Sena dengan Dewa Ruci. Saya kira yang menarik di sini adalah bahwa fenomena spiritual yang dialami Bima Sena dalam pewayangan Jawa dialami pula oleh Sunan Kalijaga. Dengan ka...

DAGING- DAGING

Sepuluh (10) ribu tahun silam, manusia mulai mendomestikasi hewan dan tumbuhan. Hewan-hewan liar ditangkap, dilatih, dirawat, dan dikembangbiakkan. Manusia tak perlu lagi berburu untuk memakan daging.  Manusia adalah spesies luar biasa. Ia tak hanya unggul dibanding hewan-hewan lain, tapi juga menaklukkan, mengatur, dan menentukan nasib alam raya. Alam menyediakan tanah, manusia menyulapnya menjadi gerabah. Alam menyediakan logam, manusia mengubahnya menjadi roket dan pesawat terbang. Manusia terus berinovasi, mencari solusi untuk mengatasi keterbatasannya. Industri hewan mencapai titik jenuh yang membahayakan manusia. Hewan ternak menyumbang 15% dari pemanasan global. Belum lagi perilaku manusia yang brutal dalam memperlakukan hewan. Manusia membutuhkan jutaan ton daging setiap hari, yang diperoleh dengan cara membantai ribuan sapi, kambing, ayam, dan hewan ternak lainnya. Sebelum dibantai, mereka digemukkan dengan cara-cara yang tak etis dan berbahaya bagi kesehatan manusia. Untu...