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

TUJUAN KOMUNIKASI VERBAL

🔓Owner Post Published 🕕
TUJUAN KOMUNIKASI VERBAL :  Komunikasi verbal melalui lisan dapat dilakukan secara langsung bertatap   muka antara komunikator dengan komunikan, seperti berpidato atau ceramah.   Selain itu juga, komunikasi verbal melalui lisan dapat dilakukan dengan  menggunakan media, contoh seseorang yang bercakap-cakap melalui telepon.  Sedangkan komunikasi verbal melalui tulisan dilakukan dengan secara tidak   langsung antara komunikator dengan komunikan. Proses penyampaian informasi   dilakukan dengan menggunakan berupa media surat, lukisan, gambar, grafik   dan lain-lain. Adapun tujuan menggunakannya komunikasi verbal (lisan dan tulisan) antara   lain : Penyampaian penjelasan, pemberitahuan, arahan dan lain sebagainya, Presentasi penjualan dihadapan para audien, Penyelenggaraan rapat, Wawancara dengan orang lain, Pemasaran melalui telepon, dan sebagainya. Baca juga  Praktek-komunikasi-verbal
Posting Komentar
🔗BACA SELENGKAPNYA »

PRESIDEN REPUBLIK INDONESIA KE 3

🔓Owner Post Published 🕕
BIOGRAFI JUSUF HABIBIE MASA JABATAN  21 Mei 1998 – 20 Oktober 1999 Presiden ketiga Republik Indonesia, Bacharuddin Jusuf Habibie lahir di Pare-Pare, Sulawesi Selatan, pada 25 Juni 1936. Beliau merupakan anak keempat dari delapan bersaudara, pasangan Alwi Abdul Jalil Habibie dan RA. Tuti Marini Puspowardojo. Habibie yang menikah dengan Hasri Ainun Habibie pada tanggal 12 Mei 1962 ini dikaruniai dua orang putra yaitu Ilham Akbar dan Thareq Kemal. Masa kecil Habibie dilalui bersama saudara-saudaranya di Pare-Pare, Sulawesi Selatan. Sifat tegas berpegang pada prinsip telah ditunjukkan Habibie sejak kanak-kanak. Habibie yang punya kegemaran menunggang kuda ini, harus kehilangan bapaknya yang meninggal dunia pada 3 September 1950 karena terkena serangan jantung. Tak lama setelah bapaknya meninggal, Habibie pindah ke Bandung untuk menuntut ilmu di Gouvernments Middlebare School. Di SMA, beliau mulai tampak menonjol prestasinya, terutama dalam pelajaran-pelajaran eksakta. Habibie m...
Posting Komentar
🔗BACA SELENGKAPNYA »

KEKUASAAN POLITIK

🔓Owner Post Published 🕕
Dalam teori politik menunjuk pada kemampuan untuk membuat orang lain melakukan sesuatu yang tidak dikehendakinya. Max Weber menuliskan adanya tiga sumber kekuasaan: pertama dariperundang-undangan yakni kewenangan;  kedua, dari kekerasan seperti penguasaan senjata; ketiga, dari karisma. Menguraikan konsep kekuasaan politik kita perlu melihat pada kedua  elemennya, yakni kekuasaan dari akar kata kuasa dan politik yang berasal dari bahasa Yunani Politeia (berarti kiat memimpin kota (polis) ). Sedangkan kuasa dan kekuasaan kerapa dikaitkan dengan kemampuan untuk membuat gerak  yang tanpa kehadiran kuasa (kekuasaan) tidak akan terjadi, misalnya kita bisa menyuruh adik kita berdiri yang tak akan dia lakukan tanpa perintah  kita (untuk saat itu) maka kita memiliki kekuasaan atas adik kita. Kekuasaan politik dengan demikian adalah kemampuan untuk membuat masyarakat dan negara membuat keputusan yang tanpa kehadiran kekuasaan tersebut tidak akan dibuat oleh mereka. ...
Posting Komentar
🔗BACA SELENGKAPNYA »

PRAKTEK KOMUNIKASI VERBAL

🔓Owner Post Published 🕕
Prakteknya komunikasi verbal bisa dilakukan dengan cara :  Berbicara dan menulis. Umumnya untuk menyampaikan, orang cenderung lebih menyukai speaking  (berbicara) ketimbang (writing ). Selain karena praktis, speaking dianggap  lebih mudah “menyentuh” sasaran karena langsung didengar komunikan. Namun bukan berarti pesan tertulis tidak penting. Untuk menyampaikan pesan bisnis  yang panjang dan memerlukan pemahaman dan pengkajian matang, diperlukan  pula penyampaian writing. Semisal penyampaian bussines report. Sangat tidak  mungkin jika hanya disampaikan dengan berbicara. Mendengarkan dan membaca. Kenyataan menunjukkan, pelaku bisnis lebih sering mendapatkan informasi  ketimbang menyampaikan informasi. Dan aktivitas penerimaan informasi.pesan  bisnis ini dilakukan lewat proses (listening) mendengarkan dan membaca  (reading). Sayangnya, kenyataan juga menunjukkan, masih banyak di antara  kalangan bisnis yang tidak memiliki ke...
Posting Komentar
🔗BACA SELENGKAPNYA »

TIGA TRIK RAHASIA MENJADI PEMIMPIN YANG DISEGANI

🔓Owner Post Published 🕕
Gunakan kompetitor sebagai motivator Kompetitor bisa jadi adalah teman terbaik Anda. Ya, mereka bisa menjadi  acuan dalam bekerja. Biarkan staf Anda melihat ‘keluar’ dan tahu bagaimana  kompetitor bekerja serta memenuhi target agar terpacu untuk bekerja  melebihi mereka. Mempublikasi permintaan maaf Mungkin sebagian pemimpin enggan untuk meminta maaf apabila melakukan  kesalahan. Permintaan maaf sangatlah kuat mengundang empati dan menunjukkan  pertanggungjawaban. Untuk itu, jangan segan meminta maaf setidaknya kepada  staf-staf ahli yang Anda bawahi. Mintalah bantuan kecil Semua orang dalam tim tentu ingin merasa dibutuhkan. Untuk itu, jangan  segan untuk turun ke bawah mendekati karyawan meski hanya bantuan-bantuan  kecil. Ini akan membuat mereka merasa dekat dengan atasannya. Cara ini  sangat ampuh dalam meningkatkan hubungan dengan rekan kerja Anda. Itulah tiga rahasia bagaimana cara menjadi pemimpin yang disegani ole...
Posting Komentar
🔗BACA SELENGKAPNYA »