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

MEMBANGUN KOMUNIKASI MULTI DEMENSI YANG BAIK

🔓Owner Post Published 🕕
Komunikasi merupa-kan elemen vital dalam berinteraksi dengan orang lain, baik dalam pekerjaan maupun urusan lain-nya. Berkomunikasi secara baik bukan be r arti harus menjadi komunikator seperti halnya seorang orator ulung atau juru debat yang fasih. Anda cukup menjadi seseorang yang pandai membawa diri dan berkomunikasi dengan siapa pun sesuai kepentingan dan kondisi lawan bicara. Tentunya patut disadari cara anda berkomunikasi dengan penjual makanan dipinggir jalan berbeda dengan terhadap atasan di tempat kerja atau contoh lain komunikasi yang anda bangun diwarung kopi tentu jauh berbeda dengan pola yang patut diterapkan saat melakukan presentasi pekerjaan. Jadi, membangun komunikasi yang baik dan tepat sasaran merupakan salah satu dasar anda dapat dipercaya oleh rekan kerja. Tidak sedikit kalangan ahli yang merumuskan makna komunikasi.Sebagai   bagian dari sejarah umat manusia, komunikasi memiliki peran penting dalam membangun peradaban. Secara harfiah, komun...
Posting Komentar
🔗BACA SELENGKAPNYA »

CARA MEMAKSIMALKAN KEUNTUNGAN BAGI BISNIS MUSIMAN

🔓Owner Post Published 🕕
Peluang bisnis akan muncul kapan saja, dimana saja dan dengan cara apa saja. Namun ada kalanya peluang itu bisa sangat besar atau stagnan. Tinggal bagaimana kita sebagai pengusaha untuk memanfaatkan agar bisa menghasilkan keuntungan yang berlipat ganda. Salah satu cara yang paling banyak dilakukan adalah dengan memanfaatkan Bisnis Musiman agar bisa memanfaatkan moment tertentu untuk mendapatkan Keuntungan. Cara ini sering dimanfaatkan UMKM baru untuk meningkatkan omset atau modal bisnisnya. Memanfaatkan peluang Bisnis Musiman untuk mendapatkan keuntungan maksimal. Dengan kondisi UMKM di Indonesia yang berjumlah 57,9 juta unit menurut BPS atau sekitar 99,99% dari total jumlah pelaku usaha nasional, menunjukkan betapa pentingnya usaha kecil ini. Bahkan kesempatan kerja mencapai 96,99% dari bisnis UMKM ini. Jika Anda pelaku UMKM, bisa memanfaatkan momen apapun untuk meraih keuntungan maksimal dari Bisnis Musiman. Misalnya dengan memanfaatkan moment musim lebaran dengan berjual...
Posting Komentar
🔗BACA SELENGKAPNYA »

AUDIT KEUANGAN PERUSAHAAN YANG SERING DIGUNAKAN

🔓Owner Post Published 🕕
Audit Keuangan Perusahaan yang Sering Digunakan Tahap perencanaan audit merupakan pemilihan suatu prosedur audit yang akan digunakan untuk menyelesaikan suatu tujuan tertentu. Efektivitas prosedur di dalam memenuhi tujuan audit sangat spesifik dan biaya untuk melaksanakan prosedur tersebut harus dipertimbangkan dalam pemilihan model audit yang akan digunakan. Prosedur audit merupakan metode atau teknik yang digunakan oleh  audit keuangan  untuk mengumpulkan dan juga mengevaluasi bahan bukti yang telah mencukupi dan kompeten. Auditor akan mempertimbangkan bagaimana pada setiap prosedur ini digunakan ketika akan merencanakan kegiatan audit dan mengembangkan program audit tersebut. Diberikan beberapa contoh yang sangat luas tentang bagaimana di setiap prosedur audit ini akan digunakan oleh para auditor dalam konteks mengaudit siklus transaksi secara spesifik dan saldo akun yang terkait. Adapun beberapa prosedur audit yang biasa dilakukan oleh para auditor, antara lain ...
Posting Komentar
🔗BACA SELENGKAPNYA »

CARA JADI PEMIMPIN SUKSES

🔓Owner Post Published 🕕
1. Membuat orang lain merasa aman untuk bicara; Seringkali pemimpin mengintimidasi rekan mereka melalui kekuasaan. Pemimpin  sukses, alihkan perhatian dari diri sendiri kepada orang lain untuk  dorong  mereka suarakan pendapat. Pemimpin sukses adalah seseorang yang ahli membuat orang merasa aman  berbicara dan percaya diri dari berbagai perspektif dan sudut pandang  mereka. Jabatan eksekutif mereka justru digunakan untuk bisa mendekat  dengan lingkungan. Baca juga  Citra-positif-dan-menjadi-diri-sendiri 2. Membuat keputusan; Pemimpin sukses adalah seorang ahli pembuat keputusan. Mereka juga  memfasilitasi dialog untuk memberdayakan rekan mereka untuk mencapai  kesimpulan yang strategis atau mereka melakukannya sendiri. Mereka telah menguasai seni berpolitik dan dengan demikian tidak  menyia-nyiakan waktu mereka pada isu-isu yang mengganggu momentum. Mereka tahu bagaimana membu...
Posting Komentar
🔗BACA SELENGKAPNYA »

TIPS SEBELUM MEMUTUSKAN PENSIUN DINI

🔓Owner Post Published 🕕
Hampir semua orang orang yang bekerja mendambakan pensiun dini yang sejahtera. Pensiun dini memiliki   keuntungan-keuntungan : 1.      Keuntungan Finansial. Memutuskan untuk pensiun dini, berpotensi mendapatkan uang pesangon yang lebih tinggi karena pada umumnya perusahaan menawarkan pesangon besar untuk banyak menarik minat para karyawannya guna kepentingan kepegawaiannya. 2.      Keuntungan Kesempatan. Pensiun dini memberikan kesempatan untuk memulai usaha baru, sebuah cita-cita banyak karyawan kantoran yang jarang sekali terwujud. 3.      Keuntungan Kesehatan. Pensiun dini juga memberikan manfaat kesehatan karena tidak mengalami stress yang terlalu besar akibat bekerja, kurang tidur, atau kurang waktu berolah-raga. Pertimbangkan sebelum mengambil pensiun Dini : 1. Tentukan Penghasilan Pengganti Setelah Pensiun. Pensiun bukan berakhirnya kehidupan, justru akan memasuki kehidupan babak baru. S...
Posting Komentar
🔗BACA SELENGKAPNYA »