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

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 »

SEBELUM TIDUR UPAYAKAN MENDISIPLIKAN DIRI

🔓Owner Post Published 🕕
Jadikan setiap hari adalah momen kesuksesan anda. Kalimat tersebut sangat penting dijadikan titik tolak pekerjaan yang anda lakukan. Menjadikan setiap hari sebagai momen kesuksesan tentu tidak semudah yang diucapkan. Anda membutuhkan kerja keras, semngat tinggi, pikiran positif, dan sebagainya secara berkesinambungan di dalam menjalankan pekerjaan. Akan tetapi, menjadikan setiap hari sebagai momen kesuksesan pada dasarnya juga tidak sulit. Untuk mewujudkan hal tersebut, diperlukan upaya berkelanjutan dan konsisten dari diri sendiri. Salah satunya ialah dengan melakukan evaluasi serta menyusun rencana sebelum anda tidur. Ada anggapan dari pakar kesehatan bahwa kualitas tidur menentukan mutu pekerjaan seseorang. Apabila kualitas tidur seseorang sulit, maka mutu pekerjaannya juga bisa rumit. Banyak orang sukses, kaya, dan terkenal terbiasa memanfaatkan waktu sebelum tidur untuk melakukan yang istimewa. Sebab, mereka berkeyakinan bahwa mendisiplinkan diri sebelum berangkat ke...
Posting Komentar
🔗BACA SELENGKAPNYA »

UANG GAJI SERING HABIS PERCUMA !!! LAKUKAN 4 TIPS INI AGAR TIDAK BOROS

🔓Owner Post Published 🕕
Uang Gaji Sering Habis Percuma? Lakukan 4 Tips Ini Agar Tidak Boros Terkadang kita sebagai seorang karyawan dari sebuah perusahaan besar yang gaji nya lumayan besar, sering kali tidak menyadari kemana perginya uang gajian kita? Padahal gaji nya cukup besar, tapi benar-benar tidak terasa cepat habisnya. Itu adalah sebuah momen yang sering kita alami bahkan sepertinya sudah menjadi sebuah slogan umum “gaji besar, pengeluaran lebih besar”. Itu adalah slogan yang sangat tepat menurut saya . Saya, Anda, ataupun yang lainnya, pasti menginginkan uang gaji nya selalu lebih hingga menjelang hari gajian kembali. Tapi sayangnya itu adalah sebuah hal yang sudah sering menjadi mitos, bahkan sampai benar-benar tidak akan pernah terjadi, karena pengeluaran kita yang tidak terkontrol. Jikalau tau cara agar gaji selalu lebih, mungkin itu adalah hal yang sangat menyenangkan, dan mungkin kita bisa menabung secara konsisten. Ya, konsisten. Dan melalui postingan kali ini, saya mencoba berbagi t...
Posting Komentar
🔗BACA SELENGKAPNYA »

SECARA OBYEKTIF ANDA HARUS MEMBUAT PENILAIAN DIRI SENDIRI

🔓Owner Post Published 🕕
Apabila ingin sukses dan menjadi orang nomor satu di lingkungan pekerjaan, anda harus megetahui terlebih dahulu kapabilitas dan kemampuan diri sendiri. Melalui pengetahuan terhadap kapasitas diri, anda secara otomatis dapat mengepakkan sayap karier dengan mudah. Selain hal tersebut, anda juga perlu memberikan penilain pada diri sendiri secara objektif. Penilaian diri secara objektif   tidak dapat hanya dilakukan terhadap posisi atau jabatan pekerjaan anda. Anda juga dapat melakukannya ketika melakukan evaluasi diri. Saat mengevaluasi diri sendiri, anda akan mengetahui sejauh mana kapasitas, kekurangan, dan kelebihan pada diri anda. Dengan demikian, anda dapat melakukan langkah selanjutnya untuk mengoptimalkan kelebihan serta berupaya memperbaiki kekurangan diri. Berpikir positif adalah hal yang dapat mencurahkan perhatian anda untuk berkembang. Memberikan penilaian secara objektif terhadap perilaku, kegagalan, kesuksesan, atau dampak dari pekerjaan secara tidak lan...
Posting Komentar
🔗BACA SELENGKAPNYA »

BAGAIMANA SIH HIJRAH ALA SUFI

🔓Owner Post Published 🕕
Bagaimana cara menjadi seorang yang hijrah seperti para sufi Bagaimana sih hijrah para sufi ini? Sebelum belajar tentang itu. Ada baiknya kita memahami hal ini. Ada delapan prinsip (adab), berbahasa Persia, dalam tarekat Naqsyabandiyah yang dikompilasi oleh Syekh Abdul Khalik Al-Ghujdawani, qs. Prinsip –prinsip ini kemudian disempurnakan menjadi 11 prinsip oleh Imam tarekat ini, Syah Muhammad Baha’uddin an-Naqsyaband. Salah satunya adalah Safar dar Wathon yang secara harfiah artinya adalah berjalan melintasi negeri. Para Guru dalam tarekat ini sering mengartikan Safar dar Wathon, sebagai: perjalanan kembali ke kampung halaman. Itu artinya seorang salik (orang yang mengalami/belajar di perjalanan sufi-red) menempuh perjalanan dari alam ciptaan menuju alam Sang Pencipta. Diriwayatkan bahwa Nabi (saw) bersabda, “Aku menuju Tuhanku dari satu keadaan menuju keadaan yang lebih baik dan dari satu maqam menuju maqam yang lebih tinggi.” Oleh karenanya seorang salik harus menempu...
Posting Komentar
🔗BACA SELENGKAPNYA »