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

EMPAT BELAS CARA MENJADI ATASAN YANG BERWIBAWA DAN DISUKAI BAWAHAN

🔓Owner Post Published 🕕
Datang tepat waktu. Sebagai atasan, Anda wajib datang tepat waktu terlepas dari sibuk tidaknya Anda dengan urusan nonpekerjaan (lihat 7 tips agar datang tepat waktu). Bila Anda datang tdak tepat waktu, bawahan Anda akan tidak respek kepada Anda karena beralasan mereka juga bisa datang terlambat karena Anda sebagai atasannya biasa terlambat masuk kerja. Reward vs Punishment. Banyak kekecewaan bawahan kepada atasannya karena penilaian atasan yang tidak adil. Misal, Anda memberi penilaian keinerja yang sama antara bawahan yang rajin dengan yang malas. Ini biasanya memberikan demotivasi bagi bawahan yang rajin bekerja karena mereka merasa sia-sia bekerja rajin. Untuk memotivasi bawahan, Anda harus menerapkan reward and punishment. Sebagi contoh, beerilah penilaian yang lebih (reward) kepada bawahan yang rajin bekerja daripada bawahan yang malas bekerja (punishment). Dengan demikian, bawahan yang rajin dan malas akan tahu penyebab mereka mendapat kenaikan gaji sebesar itu. Diharapkan, ...
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 »

ABDULLAH AL MUBARAK : ANTARA CINTA ASMARA DAN CINTA ALLAH

🔓Owner Post Published 🕕
Abdullah Al-Mubarak : Antara Cinta Asmara dan Cinta Allah Sejak muda ia sudah bertobat dan mendapat pencerahan cahaya Ilahiah. Wali yang doanya makbul ini juga dikenal sebagai ahli hadits dan hartawan yang dermawan. Suatu hari, anak muda itu tergila-gila kepada seorang gadis. Iapun terus menerus dirundung gundah gulana yang sangat dalam. Ia memuja dan mendambakan kekasih hatinya. Setiap detik selalu teringat si jantung hati. Suatu malam, di musim dingin, ia berdiri di bawah jendela kamar sang kekasih, menunggu sang pujaan. Ia rela berlama-lama di situ sekedar untuk menatapnya walau hanya sekejap. Butiran-butiran salju yang membasahi bajunya tak membuatnya gentar, ia tetap saja termangu sepanjang malam, menunggu si pujaan hati menampakkan parasnya. Sesaat terdengar alunan azan yang memecah keheningan hari yang beranjak menjadi malam. Dingin dan senyap. Tapi justru saat itulah cintanya melampaui ruang dan waktu. Mengalahkan dinginnya malam. Tak terasa ia sudah berjam-jam te...
Posting Komentar
🔗BACA SELENGKAPNYA »

PENGERTIAN, FUNGSI DAN JENIS LINK BLOG DAN WEBSITE

🔓Owner Post Published 🕕
Pada dasarnya, pengertian link adalah suatu istilah pada website dan blog yang merujuk pada kata asli yaitu Hyperlink. Karena istilah Hyperlink dianggap cukup panjang dan kurang ringkas, maka kebanyakan orang hanya akan menyebutnya cukup dengan link. Untuk memiliki skor otoritas  blog dan web milik anda cek disini  website authority checker . Apa artinya ini? Domain Rating (DR) adalah ukuran otoritas sebuah website berdasarkan profil backlink-nya. Skalanya dari nol sampai seratus. Secara umum, semakin tinggi angka ini, semakin kuat dan otoritatif situs tersebut. Bagaimana cara menghitungnya? Domain Rating (DR) melihat kualitas dan kuantitas backlink eksternal ke sebuah website. Itu tidak memperhitungkan variabel lain seperti spam tautan, lalu lintas, usia domain, dll. Bagaimana saya harus menggunakannya? Peringkat Domain (DR) berarti sangat sedikit dalam isolasi. Namun, itu memberikan cara terbaik untuk membandingkan otoritas relatif dari dua atau lebih situs web di ceruk yang...
Posting Komentar
🔗BACA SELENGKAPNYA »

CIRI CIRI KONFLIK MASYARAKAT

🔓Owner Post Published 🕕
Konflik berasal dari kata kerja Latin configere yang berarti saling memukul. Secara sosiologis, konflik diartikan sebagai suatu proses sosial antara dua orang atau lebih (bisa juga kelompok) dimana salah satu pihak berusaha menyingkirkan pihak lain dengan menghancurkannya atau membuatnya  tidak berdaya. Konflik dilatarbelakangi oleh perbedaan ciri-ciri yang dibawa individu  dalam suatu interaksi. perbedaan-perbedaan tersebut diantaranya adalah  menyangkut ciri fisik, kepandaian, pengetahuan, adat istiadat, keyakinan,  dan lain sebagainya. Baca juga  aktor-faktor-terjadinya-konflik-sosial Dengan dibawasertanya ciri-ciri individual dalam interaksi sosial, konflik merupakan situasi yang wajar dalam setiap masyarakat dan tidak satu masyarakat pun yang tidak pernah mengalami  konflik antar anggotanya atau dengan kelompok masyarakat lainnya, konflik hanya akan hilang bersamaan dengan hilangnya masyarakat itu sendiri. Konflik bertentangan dengan inte...
Posting Komentar
🔗BACA SELENGKAPNYA »