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

LIMA HAL YANG MELEJITKAN ORANG BIASA MENJADI SUKSES

🔓Owner Post Published 🕕
Setiap orang tentu ingin menjadi orang sukses.  Tapi kenapa keberhasilan tampak begitu mudah menghampiri orang lain dan tidak pada diri anda? Kenapa orang lain tampak begitu gampang mendapat apapun yang diinginkannya, sedang anda sekalipun merasa sudah berusaha SANGAT keras, bahkan mungkin jungkir balik ke sana kemari namun yang didapat hanya secuil. Apa benar itu karena takdir? Apa mungkin mereka lebih beruntung dari anda? Tentang orang-orang sukses, dari pengamatan saya, mereka memiliki beberapa kesamaan : 1. MENCINTAI YANG DI LAKUKAN. Orang-orang sukses biasanya berhasil di bidang yang dicintainya. Karena senang dengan yang dilakukannya, mereka akan menjalaninya dengan riang gembira.Tanpa ada paksaan. Lakukan apa yang anda cintai. Makin anda lakukan, makin bersemangat dan nikmat menjalaninya. 2. BERORIENTASI PADA TUJUAN. Orang-orang sukses selalu berorientasi padatujuan.  Tahu mengapa harus melakukan sesuatu. Dan memfokuskan usahanya untuk m...
Posting Komentar
🔗BACA SELENGKAPNYA »

MENGENALI LIMA TANDA BUDAYA PERUSAHAAN YANG BURUK

🔓Owner Post Published 🕕
Perusahaan sebagai tempat bekerja dan meniti karir memang memiliki peran yang sangat penting bagi semua orang yang berada di dalamnya.  Tidak hanya bagi pemilik dan investor perusahaan namun hal ini seharusnya juga berlaku bagi para karyawan. Namun sayangnya tidak semua orang bisa merasakan kenyamanan bekerja di sebuah perusahaan. Tentu saja jika hal ini banyak menimpa karyawan. Penyebabnya adalah adanya sistem atau budaya perusahaan yang kurang baik atau buruk.  Sebagai pemilik atau pemimpin perusahaan, maka Anda seharusnya segera bertindak jika mendapati budaya perusahaan yang buruk itu. Lalu seperti apakah tanda-tanda budaya perusahaan yang buruk? Berikut ulasannya. 1. Masalah Komunikasi Tanda pertama budaya perusahaan yang buruk adalah komunikasi yang disfungsional. Komunikasi yang buruk ini bisa berupa komunikasi tidak langsung (mengirim pesan melalui orang lain) dan munculnya informasi menyesatkan atau karyawan yang tidak bisa mengambil keputusannya s...
Posting Komentar
🔗BACA SELENGKAPNYA »

PEPES IKAN PELUANG BISNIS NAN MENGIURKAN

🔓Owner Post Published 🕕
Pepes Ikan Peluang Bisnis Nan Menggiurkan Pepes ikan kini telah menjadi salah satu masakan nusantara khas Sunda yang semakin ramai dengan banyaknya penggemar. Selain rasanya yang khas, pepes ikan juga merupakan menu yang pas untuk menemani sepiring nasi hangat. Selain pepes ikan, ada berbagai macam olahan pepes lainnya seperti tahu, ayam, jamur, dan lain sebagainya. Namun, pepes ikanlah yang paling banyak dicari orang. Melihat begitu banyaknya penggemar masakan nusantara khas Sunda yaitu pepes ikan ini, maka muncullah peluang bisnis pepes ikan yang gurih nan menggiurkan. Selain rasanya yang gurih, pepes ikan juga baik untuk kesehatan, rendah akan lemak dan kolesterol. Karena itulah orang tak perlu ragu lagi untuk menikmati menu masakan pepes ikan khas Sunda ini. Cara Membuat Pepes Ikan Nila Khas Cianjur : Setelah ikan didiamkan selama waktu yang telah ditentukan, lanjutkan dengan memberikan ikan dengan lumuran bumbu yang telah dihaluskan secara merata sampai ke per...
Posting Komentar
🔗BACA SELENGKAPNYA »

CARA MENGHAPUS SHOWING POSTS WITH THE LABEL BAWAAN BLOGGER

🔓Owner Post Published 🕕
Cara menghapus Showing posts with the label bawaan Blog cotempo, emporio, soho dan notable gimana ya…???supaya blog bisa keren gitu lo!, sebab blog SUARA HARIAN OTO BEMO BERODA TIGA sudah berumur 14 tahun, tapi tidak pernah seo, tak punya keyword yang baik dan tidak punya backling yang memadai, lagi pula tak terdeksi BERT cerdas. Cukup menderita sebagai blogger Tua tak pernah naik kelas, malah tambah puyeng palak gue mas bro !!! Tampilan contempo, soho, emporio dan notable adalah sangat mobile, dan hasil modifikasi desain menjadikannya sangat dinamis, tampak bersih. Tanya jawab khusus sebuah link komentar kepada Sofyan Ya-an Februari 25, 2021 website editblogtema.com.   Masuk ke pengaturan blog>Tema>Edit HTML: Cari kode:   <div class='post-filter-message'>   akan muncul kode lengkapnya sbb:   <div class='post-filter-message'> <div> <b:if cond='data:view.isArchive'> <data:view.archive.rangeMessage/> <b:elseif...
Posting Komentar
🔗BACA SELENGKAPNYA »

ENAM ALASAN KELIRU SAAT MEMULAI BISNIS

🔓Owner Post Published 🕕
6 Alasan Keliru Saat Memulai Bisnis, Hindari Sebisa Mungkin Memiliki sebuah bisnis memang sangat menyenangkan. Selain bisa berdiri di atas kaki sendiri, keuntungan yang tak terbatas menjadi daya tarik tersendiri dari sebuah bisnis.  Dari keasyikan dan banyaknya manfaat yang bisa diperoleh dari binsis, maka kemudian banyak orang yang sangat mendambakan dan bercita-cita menjadi pebisnis. Bahkan tak jarang, banyak diantaranya rela meninggakan karir yang sudah dibangun dari awal di sebuah perusahaan karena untuk terjun ke dunia bisnis.  Memang tak ada yang salah jika kemudian banyak orang yang ingin berbisnis, karena dunia entrepreneur yang selalu menarik dan mempesona dipandang mata. Namun sayangnya tak semua bayangan bisnis bisa sesuai harapan para pebisnisnya. Pada beberapa kasus, bisnis justru jadi menjadi permasalahan pelik bagi beberapa entrepreneur karena bangunan bisnisnya yang tidak dilandasi dengan alasan yang tepat dan kuat. Sebuah alasan atau...
Posting Komentar
🔗BACA SELENGKAPNYA »