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

MENILAI SEBUAH PRISTIWA JANGAN LEBAY

🔓Owner Post Published 🕕
Setiap melihat dan menilai sebuah peristiwa, apakah dalam peristiwa itu membuat rasa spiritual dan rasa cinta kita kepadaNya bertambah? Ataukah justru kebencian dan dosa kita yang bertambah? Bagiku Basuki Tjahaya dan Habib Riziek adalah guru kehidupan sebagai pelajaran bagi diri kita dalam perjalanan kedalam diri. Mengapa kita sangat membenci salah satunya? bukankah keduanya diciptakan oleh Tuhan yang kita sembah setiap saat. Mari lihat lebih dalam daripada sekedar perbedaan yang kita ributkan selama ini. Apakah dengan membenci salah satunya kesucian kita akan meningkat? Apakah dengan menghujat seseorang itu artinya kita adalah orang yang lebih suci dari seseorang yang kita hujat? Apakah dengan mengutuk kegelapan, terang akan hadir ? Apakah dengan membenci panas, rasa panas akan hilang ? Apakah marah akan membuat suasana menjadi damai? Jika tidak, mengapa kita tidak belajar dan berlatih dikesempatan dalam peristiwa ini? Belajar mengurangi penghakim...
Posting Komentar
🔗BACA SELENGKAPNYA »

BERPIKIRAN TERBUKA DAPAT MENGEVALUASI DIRI

🔓Owner Post Published 🕕
Pikiran terbuka menjadi jalan untuk dapat mengevaluasi diri sendiri. Melalui pikiran terbuka, anda mampu untuk menilai diri secara objektif. Pikiran terbuka tidak hanya mampu membuat orang lain sekitar anda bertahan dan merasa nyaman. Sebab, pikiran terbuka juga mendatangkan kebaikan bagi anda di masa mendatang. Berpikiran terbuka termasuk salah satu karakter wirausahawan sukses. Dengan mengembangkan pikiran terbuka, anda dapat mengambil hal positif yang berada di luar diri sendiri. Jika terbiasa berpikir positif, anda akan selalu melihat peluang di setiap kesempatan hidup. Seorang pekerja yang berorientasi sukses akan selalu memiliki pikiran terbuka untuk memunculkan ide-ide kreatif, aplikatif, serta penuh solusi. Berpikir terbuka pada hakikatnya sama dengan berpikir positif. Secara definitif, berfikir terbuka atau open minded  ialah memiliki kemampuan untuk menerima hal atau ide baru dan berbeda dari orang lain. Meskipun gagasan orang lain tampak buruk, dengan pikiran...
Posting Komentar
🔗BACA SELENGKAPNYA »

KOMUNIKASI VERBAL DAN NON VERBAL

🔓Owner Post Published 🕕
Komunikasi Verbal dan Non Verbal Komunikasi verbal adalah komunikasi dengan menggunakan simbol-simbol  verbal. Simbol verbal bahasa merupakan pencapaian manusia yang paling  impresif. Ada aturan-aturan yang ada untuk setiap bahasa yaitu fonologi,  sintaksis, semantik dan pragmatis. Contoh : 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.Komunikasi Non Verbal. Komunikasi nonverbal adalah proses komunikasi dimana pesan disampaikan  tidak menggunakan kata-kata. Contoh komunikasi nonverbal ialah menggunakan  gerak isyarat, bahasa tubuh, ekspresi wajah dan kontak mata, penggunaan   objek seperti pakaian, pot...
Posting Komentar
🔗BACA SELENGKAPNYA »

HALAL BIHALAL PDAM KOTA PONTIANAK

🔓Owner Post Published 🕕
PDAM Kota Pontianak melaksanakan halal bihalal sabtu tanggal 27 Oktober 2007 dihalaman Surau Almutahhroh kantor PDAM dihadiri seluruh jajaran staf, pejabat, 3 Direksi yaitu ; Dirut Syahril Japarin, Dirum, Dirtek serta keluarga besar PDAM Kota Pontianak dan para undangan serta menghadiri bapak Ustad Drs. Abdul Aziz, yang dalam ceramahnya jangan "selingkuh" yang sudah berkeluarga dan harmonisasi hubungan atasan dan bawahan harus dijaga. Ketika pak ustad mengulangi kalimat selingkuh karyawan dan karyawati tersenyum simpul. Baca Juga :   Pdam-kota-pontianak-milik-pemkot Selingkuh adalah perilaku melanggar komitmen hubungan, yang akhirnya melukai rasa percaya dalam sebuah hubungan romantis. Oleh karena itu, batasan selingkuh tiap pasangan bisa berbeda, tergantung pada komitmen hubungan mereka masing-masing. Misalnya, Sinta bisa saja berpendapat bahwa jika Rama menonton film porno, ia telah berselingkuh. Sementara menurut Budi, Ani berselingkuh jika melakukan hubungan seksual d...
9 komentar
🔗BACA SELENGKAPNYA »

NAMUN AKU BUKAN AKU, BUKAN AKU ADALAH AKU

🔓Owner Post Published 🕕
Hmmmm! jangan katakan bahwa aku adalah aku, aku bukan aku, bukan aku adalah aku. Meskipun kau adalah kau dan aku adalah aku. Namun aku bukan aku, bukan aku adalah aku. Batin dan zahirku adalah engkau, aku bukan aku, bukan aku adalah aku. Gaib dan kehadiranku adalah engkau, aku bukan aku, bukan aku adalah aku. #Ghazal Maulana Rumi dalam Divan Syams Tabrizi# Dalam syair diatas, Maulana Rumi ingin menjelaskan ada 'aku' yang palsu dan ada 'aku' yang asli. Namun tidak mudah menafikan 'aku' yang palsu tuk menemukan 'aku yang asli. Karena itu Rumi senantiasa mengulang-ngulangnya; aku bukan aku Bukan aku adalah aku. Aku palsu adalah aku yang senantiasa nampak. aku palsu adalah aku yang senantiasa menunjukkan identitasnya. Namun bukankah aku pasti menunjukkan identitasnya ? Bukankah identitas pasti menunjukkan aku ? Dan juga bukankah jika aku dinafikan bermakna tak ada lagi yang terlihat atau tak ada lagi identitas ? Maulana ingin men...
Posting Komentar
🔗BACA SELENGKAPNYA »