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

TEAM WORK ADALAH RAHASIA BISNIS BISA BERTAHAN LAMA

🔓Owner Post Published 🕕
Team work merupakan pondasi suatu bisnis. Sukses tidaknya bisnis akan bergantung pada kondisi team worknya. Definisi Team work adalah kerja tim, yaitu serangkaian sikap dan perilaku dari orang-orang yang tergabung dalam sebuah tim. Team work inilah yang nantinya akan menentukan perjalanan dari suatu bisnis. Manfaat yang diperoleh dengan adanya Team work antara lain, dalam hal pemecahan masalah. Adanya team work membuat suatu bisnis menjadi lebih cepat dan lebih baik dalam mengambil keputusan. Hal ini akan diperoleh dari kerja tim yang baik. Pada dasarnya keputusan yang diambil dari pemikiran banyak orang hasilnya lebih baik dibandingkan pemikiran dari satu orang, dengan catatan adanya rasa saling menghargai pendapat orang lain dan tidak egois. Manfaat kedua adalah dalam hal menyelesaikan pekerjaan. Suatu pekerjaan akan selesai dengan cepat jika dikerjakan secara bersama-sama. Tim yang baik akan membagi setiap pekerjaan kepada seluruh anggota timnya sesuai dengan kemampuan a...
Posting Komentar
🔗BACA SELENGKAPNYA »

MENJALANKAN MOBILE MARKETING DENGAN CERDAS

🔓Owner Post Published 🕕
Menjalankan Mobile Marketing dengan Cerdas Apakah Anda pemilik bisnis online atau yang lain? Apa produk Anda masih sedikit peminat? Apa Anda masih bingung cara efektif untuk memasarkan produk Anda? Anda bisa melakukan sistem marketing secara online yang efektif. Saya akan bagikan 6 tips yang bisa Anda lakukan. Fokus pada customer Di zaman sekarang yang serba internet pastinya sudah tidak awam customer menggunakan handphone canggih. Customer Anda punya itu sih oke tapi apa mereka selalu menggunakannya? Ini yang membuat Anda harus memastikannya. kalau sang customer sudah pasti selalu terhubung dengan internet, tugas Anda memastikan website bisnis Anda. Sebaiknya customer bisa dengan mudah mengakses. Apalagi saat customer mau melakukan pembelian. Waktu loading kalau bisa tidak lebih dari 3 detik. Nanti yang ada customer Anda batal mengunjungi web Anda. Hormati Privasi Anda bisa saja mengirim iklan – iklan produk Anda lewat pesan seperti SMS blash. Tapi bukan berarti b...
Posting Komentar
🔗BACA SELENGKAPNYA »

MENERAPKAN LIMA BELAS TIPS INI MEMBUAT PEMIMPIN BERWIBAWA

🔓Owner Post Published 🕕
LAKUKAN LAH 1. Lebih banyak mendengar daripada berbicara Seorang pemimpin tidak hanya wajib pintar dalam berbicara, namun juga mendengarkan. Jika pemimpin tak bisa mendengarkan masukan dari bawahan mereka, perusahaan akan sulit maju. Karena biasanya para bawahanlah yang berhadapan langsung dengan pelanggan. 2. Bicaralah dengan singkat, namun langsung menuju inti permasalahan. Setelah menerima segala masukan yang ada, saringlah seluruh informasi tersebut, kemudian di akhir buatlah sebuah kesimpulan berupa target apa yang harus dicapai dalam sebulan kedepan. Sehingga, arah kerja kalian lebih terarah. 3. Buktikan kemampuanmu melalui hasil, bukan omongan belaka. Seorang pemimpin yang hanya pintar bicara tak akan dihargai oleh bawahan mereka. Buktikan bahwa pemikiranmu itu memang bisa diterapkan dan memberi hasil maksimal, bukan sekedar bualan belaka. 4. Percayalah kepada orang lain untuk melakukan pekerjaan mereka masing-masing. Kamu tak akan bisa mengerjakan sega...
Posting Komentar
🔗BACA SELENGKAPNYA »

PRESIDEN REPUBLIK INDONESIA KE 4

🔓Owner Post Published 🕕
BIOGRAFI ABDURRAHMAN WAHID  Masa jabatan 20 Oktober 1999 – 23 Juli 2001 Gus Dur adalah putra pertama dari enam bersaudara yang dilahirkan di Denanyar Jombang Jawa Timur pada tanggal 4 Agustus 1940. Secara genetik Gus Dur adalah keturunan “darah biru”. Ayahnya, K.H. Wahid Hasyim adalah putra K.H. Hasyim Asy’ari, pendiri jam’iyah Nahdlatul Ulama (NU)-organisasi massa Islam terbesar di Indonesia-dan pendiri Pesantren Tebu Ireng Jombang. Ibundanya, Ny. Hj. Sholehah adalah putri pendiri Pesantren Denanyar Jombang, K.H. Bisri Syamsuri. Kakek dari pihak ibunya ini juga merupakan tokoh NU, yang menjadi Rais ‘Aam PBNU setelah K.H. Abdul Wahab Hasbullah. Dengan demikian, Gus Dur merupakan cucu dari dua ulama NU sekaligus, dan dua tokoh bangsa Indonesia. Pada tahun 1949, ketika clash dengan pemerintahan Belanda telah berakhir, ayahnya diangkat sebagai Menteri Agama pertama, sehingga keluarga Wahid Hasyim pindah ke Jakarta. Dengan demikian suasana baru telah dimasukinya. Tamu-t...
Posting Komentar
🔗BACA SELENGKAPNYA »

PENTINGNYA MELAKUKAN SURVEY BISNIS

🔓Owner Post Published 🕕
Apakah yang Anda ketahui soal survei? Survei adalah kegiatan untuk melakukan penelitian atau pemeriksaan dengan cara kompeherensif. Survei dapat dilakukan melalui wawancara langsung maupun online dengan sistem kuisioner.  Apa sih gunanya Anda harus capek – capek survei? Tentu Anda ingin tahu informasi terbaru dalam masyarakat untuk kemajuan perusahaan Anda. Anda yang melakukan survey bisnis berarti menampung suara pelanggan baik keinginan atau ketidakpuasan terhadap perusahaan. Uneg – uneg pelanggan bisa tersalurkan melalui survey itu. Nah, keuntungan untuk perusahaan Anda melalui survei bisnis yaitu segmentasi pasar dilakukan secara maksimal, target pemasaran semakin lebih luas dengan peluang yang ada, posisi usaha dapat dibidik, dan tentu Anda akan lebih fokus pada promosi produk serta sistem manajemen yang lebih efisien. Apa saja sih informasi yang akan didapat?  Informasi berbanding lurus dengan pertanyaan. Informasi yang didapat itu relatif sesuai keinginan ...
Posting Komentar
🔗BACA SELENGKAPNYA »