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

FUNGSI KOMUNIKASI NON VERBAL

🔓Owner Post Published 🕕
Fungsi pertama : Repetisi Perilaku nonverbal dapat mengulangi perilaku verbal. Misalnya, Anda  menganggukkan kepala ketika mengatakan "Ya," atau menggelengkan kepala  ketika mengatakan "Tidak," atau menunjukkan arah (dengan telunjuk) ke mana  seseorang harus pergi untuk menemukan Water Close. Fungsi Kedua : Subtitusi Perilaku nonverbal dapat menggantikan perilaku verbal, jadi tanpa berbicara. Anda bisa berinteraksi dengan orang lain. Misalnya, seorang pengamen  mendatangi mobil Anda kemudian tanpa mengucapkan sepatah katapun Anda  menggoyangkan tangan Anda dengan telapak tangan mengarah ke depan (sebagai  kata pengganti "Tidak"). Isyarat nonverbal yang menggantikan kata atau frasa  inilah yang disebut emblem. Fungsi Ketiga : Kontradiksi Perilaku nonverbal dapat membantah atau bertentangan dengan perilaku verbal  dan bisa memberikan makna lain terhadap pesan verbal . Misalnya, Anda  memuji prestasi teman sambil mencibirkan bibir...
Posting Komentar
🔗BACA SELENGKAPNYA »

DELAPAN INDIKATOR BLOG DIANGGAP SPAM DAN DIHAPUS OLEH GOOGLE

🔓Owner Post Published 🕕
Untuk situs berita dan belanja otomotif, lihat Weblogs, Inc. Untuk spamming yang dilakukan melalui komentar di blog yang sah, lihat Spam di blog. Blog spam, juga dikenal sebagai blog otomatis atau splog neologisme, adalah blog yang penulis gunakan untuk mempromosikan situs web terafiliasi, untuk meningkatkan peringkat mesin telusur dari situs terkait, atau sekadar menjual tautan/iklan. Tujuan dari splog bisa untuk meningkatkan PageRank atau portofolio backlink situs afiliasi, untuk meningkatkan tayangan iklan berbayar dari pengunjung (lihat blog dibuat untuk AdSense atau MFA), dan/atau menggunakan blog sebagai outlet tautan untuk menjual tautan atau membuat situs baru diindeks. Blog spam biasanya merupakan jenis situs pengikis, di mana konten sering berupa teks yang tidak asli atau hanya dicuri (lihat pengikisan blog) dari situs web lain. Blog-blog ini biasanya berisi sejumlah besar tautan ke situs-situs yang terkait dengan pembuat splog yang sering kali merupakan situs web yang tidak ...
Posting Komentar
🔗BACA SELENGKAPNYA »

PENDAHULUAN FACEBOOK

🔓Owner Post Published 🕕
Setiap hari, orang menggunakan Facebook untuk membagikan ceritanya, melihat  dunia melalui mata orang lain, serta berhubungan dengan teman dan berbagai  aktivitas. Percakapan yang terjadi di Facebook menunjukkan keragaman  komunitas yang terdiri dari dua miliar orang yang berkomunikasi di berbagai  negara dan budaya, serta dalam puluhan bahasa, memposting semua hal mulai  dari teks hingga foto dan video. Kami mengakui betapa penting bagi Facebook untuk menjadi tempat yang  membuat orang merasa mampu berkomunikasi, dan kami menganggap serius peran  kami dalam mencegah penyalahgunaan layanan kami. Karena itulah kami  menyusun seperangkat Standar Komunitas yang menjelaskan secara garis besar  hal-hal yang diizinkan dan dilarang di Facebook. Standar kami berlaku di   seluruh dunia dan untuk segala jenis konten. Standar ini dirancang  komprehensif – misalnya, konten yang mungkin tidak dianggap ujaran kebencian mungkin tetap ak...
Posting Komentar
🔗BACA SELENGKAPNYA »

KONTEN TERINDEKS GOOGLE CRAWL JADI HARAPAN PENGGUNA

🔓Owner Post Published 🕕
Kamu mungkin sering menemukan kata ‘indexing’ di berbagai kesempatan, termasuk dalam pengolahan data.  Dikutip dari Moz, indexing adalah proses penyimpanan dan pengaturan konten yang ditemukan search engine selama proses crawling. Sementara itu, menurut DeepCrawl, indexing adalah proses ketika search engine mengatur informasi sebelum adanya pencarian. Maka, ketika ada seseorang yang mencari dengan sebuah keyword, search engine mudah menemukan situs yang relevan.  Indexing atau web indexing merupakan salah satu bagian dari kinerja search engine. Secara garis besar, kerja sebuah search engine terdiri atas tiga tahap, yakni crawling, indexing, dan ranking. Pada tahap crawling, search engine menjelajah berbagai situs yang ada di internet melalui URL yang mereka temukan. Tahap selanjutnya yaitu indexing, ketika search engine menyimpan dan mengatur konten yang ada dalam berbagai situs. Kemudian barulah terjadi ranking, yaitu ketika search engine menampilkan konten yang paling sesuai...
Posting Komentar
🔗BACA SELENGKAPNYA »

KOMUNIKASI VERBAL

🔓Owner Post Published 🕕
KOMUNIKASI VERBAL :  Istilah verbal dalam kamus bahasa indonesia adalah lisan, maksudnya   komunikasi dilakukan antara pembicara dan pendengar hanya menggunakan lisan   saja. Sedangkan dalam ilmu komunikasi menyatakan bahwa istilah komunikasi   verbal yaitu proses penyampaian informasi berupa lisan dan tulisan. Komunikasi verbal adalah bentuk komunikasi yang ada dalam kehidupan manusia  dalam hubungan atau interaksi sosialnya pengertian komunikasi verbal   (verbal communication) adalah bentuk komunikasi yang disampaikan  komunikator kepada komunikan dengan lisan (oral) atau tulisan (written).  Dari pengertian komunikasi verbal tersebut maka jelas peranannya sangat   besar karena sebagian proses komunikasi langsung dengan komunikasi verbal   ide-ide, pemikiran atau keputusan lebih mudah disampaikan secara verbal   daripada non verbal. Pada komunikasi verbal ini komunikan juga lebih mudah...
Posting Komentar
🔗BACA SELENGKAPNYA »