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

PEPES IKAN PELUANG BISNIS NAN MENGIURKAN

🔓Owner Post Published 🕕
Pepes Ikan Peluang Bisnis Nan Menggiurkan Pepes ikan kini telah menjadi salah satu masakan nusantara khas Sunda yang semakin ramai dengan banyaknya penggemar. Selain rasanya yang khas, pepes ikan juga merupakan menu yang pas untuk menemani sepiring nasi hangat. Selain pepes ikan, ada berbagai macam olahan pepes lainnya seperti tahu, ayam, jamur, dan lain sebagainya. Namun, pepes ikanlah yang paling banyak dicari orang. Melihat begitu banyaknya penggemar masakan nusantara khas Sunda yaitu pepes ikan ini, maka muncullah peluang bisnis pepes ikan yang gurih nan menggiurkan. Selain rasanya yang gurih, pepes ikan juga baik untuk kesehatan, rendah akan lemak dan kolesterol. Karena itulah orang tak perlu ragu lagi untuk menikmati menu masakan pepes ikan khas Sunda ini. Cara Membuat Pepes Ikan Nila Khas Cianjur : Setelah ikan didiamkan selama waktu yang telah ditentukan, lanjutkan dengan memberikan ikan dengan lumuran bumbu yang telah dihaluskan secara merata sampai ke per...
Posting Komentar
🔗BACA SELENGKAPNYA »

CONTOH 3 PELUANG USAHA SAMPINGAN DIRUMAH

🔓Owner Post Published 🕕
Usaha Tanpa Modal Bisnis online adalah salah satu bisnis yang tidak butuh modal dalam menjalankannya. Walau tak butuh modal tetapi bisnis ini butuh koneksi internet dan komputer atau laptop. Karena mengingat saat ini laptop atau komputer bukan menjadi barang yang mahal.  Sehingga komponen itu saya anggap bukan sebuah modal. Untuk koneksi internet itu hal yang mudah, sebab saat ini layanan hotspot area gratis sudah dapat anda temui dengan mudah di perkotaan maupun di pedesaan. Usaha Modal Kecil Bisnis Jual Pulsa merupakan bisnis yang saat ini cukup popular untuk dijalankan. Sebab tak sedikit orang sudah pernah menjalankan bisnis yang satu ini.  Bisnis ini sangatlah mudah, sebab hanya dengan menggunakan satu buah handphone. Seseorang dapat berjualan pulsa dengan mudah tanpa mengenal waktu dan tempat. Usaha Modal Besar Untuk bisnis sampingan dengan modal besar itu sangat banyak sekali. Sebab anda dapat memilih usaha yang anda kehendaki. Bila anda ti...
Posting Komentar
🔗BACA SELENGKAPNYA »

EMPAT MATERI LEADERSHIP YANG WAJIB DIMILIKI MANAGER ANDA

🔓Owner Post Published 🕕
Pelatihan kepemimpinan dalam sebuah perusahaan atau yang lebih banyak dikenal dengan istilah training leadership ini menjadi tonggak penting kepemimpinan perusahaan. Setiap perusahaan pasti selalu membutuhkan pergantian kepemimpinan  yang memiliki kompetensi lebih baik atau paling tidak sama dengan pemimpin sebelumnya. Untuk itulah diadakan pelatihan dengan materi leadership yang kuat agar calon pemimpin ini bisa terarah dengan baik. Kepemimpinan menjadi salah satu seni yang cukup sulit dilakukan bagi sebagian orang. Mereka harus menyempurnakan diri sebagai seseorang yang bijaksana, tegas, berani mengambil keputusan, bisa mengayomi anak buahnya dan lain sebagainya. Belajar dari pengalaman saja tidak cukup, para pemimpin ini wajib mendapatkan materi leadership yang sesuai dengan karakteristik anggota yang dipimpinnya. Pada dasarnya setiap training leadership pasti memiliki patokan dasar materi atau materi utama yang dikhususkan untuk membentuk jiwa kepemimpinan pesertanya...
Posting Komentar
🔗BACA SELENGKAPNYA »

PERKEMBANGAN DAN DEFINISI ILMU POLITIK

🔓Owner Post Published 🕕
Apabila ilmu politik dipandang semata-mata sebagai salah satu cabang dari  ilmu-ilmu sosial yang memiliki dasar, rangka, fokus, dan ruang lingkup yang  jelas, maka dapat dikatakan bahwa ilmu politik masih muda usianya karena  baru lahir pada akhir abad ke-19. pada tahap itu ilmu politik berkembang secara pesat berdampingan dengan cabang-cabang ilmu sosial lainnya, seperti  sosiologi, antropologi, ekonomi, dan psikologi, dan dalam perkembangan ini mereka saling mempengaruhi. Akan tetapi, apabila ilmu politik ditinjau dalam rangka yang lebih luas,  yaitu sebagai pembahasan secara rasional dari berbagai aspek negara dan  kehidupan politik, maka ilmu politik dapat dikatakan jauh lebih tua  umurnya. Bahkan ia sering dinamakan ilmu sosial yang tertua di dunia. Pada  taraf perkembangan itu ilmu politik banyak bersandar pada sejarah dan  filsafat. Di Indonesia kita mendapati beberapa karya tulis yang membahas masalah sejarah dan kenegaraa...
Posting Komentar
🔗BACA SELENGKAPNYA »

SEJARAH BANI ISRAIL (Part 3) : DUA BELAS KLAN DAN DIASPORA MEREKA

🔓Owner Post Published 🕕
Ilustrasi Gambar Al-Qur’an menggunakan dua istilah untuk menunjuk bangsa keturunan Ya’qub, yaitu Bani Israil dan Yahudi. (Ilustrasi: The Forward). Dari dua istri (Lea dan Rahel) dan dua selir (Zilpa dan Bilha), Ya’qub alias Israil memilik 12 putra, yaitu Ruben, Simeon, Lewi, Yehuda, Dan, Naftali, Gad, Asyer, Isakhar, Zebulon, Yusuf, dan Benyamin. Putra-putra Ya’qub ini menjadi 12 kabilah Bani Israil. Al-Qur’an menyebutkan:    وَقَطَّعْنٰهُمُ اثْنَتَيْ عَشْرَةَ اَسْبَاطًا اُمَمًا (الاعراف : ١٦٠)  “Dan Kami bagi mereka ke dalam dua belas suku yang masing-masing berjumlah besar” (QS Al-A’raf [7]: 160).  Putra ketiga Ya’qub, Lewi, menurunkan banyak nabi dan imam, seperti Musa, Harun, Samuel, Ilyas, Zakariyya, dan Yahya. Putra Ya’qub yang keempat, Yehuda, menurunkan nabi sekaligus raja, yaitu Dawud dan Sulaiman. Putra Ya’qub yang ke-11, Yusuf, menurunkan Nabi Yusya’ dan Ilyasa’. Putra Ya’qub yang ke-12, Benyamin, menurunkan Nabi Yunus. Isa, menurut sebagian pendapat,...
Posting Komentar
🔗BACA SELENGKAPNYA »