Memberi Efek Memutar Pada Image Di Blog

Memberi Efek Memutar Pada Image Di Blog

Bola Hero Gawai

Memberi Efek Memutar Pada Image Di Blog

Efek Memutar Pada Image
Iseng-iseng sambil dengerin lagu Raisa - Terjebak Nostalgia, saya cari korban untuk mempraktekan efek transisi dengan rotasi. Akhirnya kelopak mata saya tertuju pada gambar yang ada di blog seperti gambar di postingan maupun sidebar dan widget.

Karena sebelumnya saya sudah berhasil menerapkan efek opacity pada image di postingan maupun di widget. Kini giliran efek rotasi yang membuat gambar berputar saat disorot mouse. Mungkin ini tidak asing bagi sebagian blogger, tapi ini sesuatu hal yang baru bagi saya dengan membaca tutorial, praktek dan tidak takut gagal.

Sebelumnya saya sudah pernah memposting Belajar Dasar HTML, CSS, dan Javascript secara online, nah di sana-lah sedikit-sedikit saya belajar koding selama ini ditambah dari membaca postingan blogger-blogger lain.

Balik lagi ke topik masalah, kali ini efek berputar akan berfungsi pada semua gambar yang ada di widget, sidebar, dan postingan tanpa membuat kelas baru pada image. Caranya cukup mudah, bagi yang ingin mencobanya ikuti langkah-langkahnya di bawah ini.

Cari kode yang seperti ini a img, jika belum ada silahkan dibuat saja dan simpan di bawah kode body.

a img{border-width:0;transition:all 400ms ease-in-out}
a img:hover{opacity:.7;transform:rotate(360deg)}

Kira-kira penyimpanannya akan tampak seperti ini:

body{............................................}
a:link{............................................}
a:visited{............................................}
a:hover{............................................}
a img{border-width:0;transition:all 400ms ease-in-out}
a img:hover{opacity:.7;transform:rotate(360deg)}

Kemudian cari kode yang seperti ini .post img, jika belum ada silahkan dibuat saja dan simpan di bawah kelompok kode .post

.post img{transition:all 400ms ease-in-out}
.post img:hover{opacity:.7;transform:rotate(360deg)}

Kemudian save template blog Anda dan coba sorotkan mouse pada gambar di blog Anda. Hehehe...sekarang gambar di blog Anda berputar 360 derajat.

Jadi intinya jika kita niat belajar khusunya belajar kode HTML atau CSS untuk membentuk atau membuat blog dan tidak hanya sekedar blogging, jangan takut untuk mencoba dan mencoba. Kesalahan yang mungkin kita buat akan memberikan pelajaran yang sangat berharga. Kita akan mendapatkan kebanggaan tersendiri setelah apa yang kita coba dan berhasil. Jadi kegiatan blogging kita tidak sia-sia.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

33 Comments Add Comment

wah... jadi org pertama lagi nih.. heheheheh... bisa ga ya cara ini digunakan pada blog saya mas kompi?

Balas

Seperti padaalenia terakhir, dicoba saja...
Demonya silahkan sorotkan pada gambar di blog ini...

Balas

siip nih.. ok langsung coba.. moga2 berhasil

Balas

Kalau sudah info di sini yah mau dilihat hehehe

Balas

Tadinya saya bingung mas soalnya saya tadi browsing pake chrome jadi effect tidak berfungsi pas saya lihat di firefox ternyata gambarnya berputar semua ....sayang penggunaan kode -webkit-transform tidak valid pada css3 ya mas jadi nya tutorial ini hanya khusus buat pengguna Firefox saja

Balas

pokoknya semua yg di post di Kompi Ajaib saya terapkan di blog saya :D
boleh nggak mas? kalau nggak boleh yaudah gpp, tapi udah saya terapkan, hehe

Balas

Ya begitulah mas...tampaknya...lebih parah lagi di ie mas...semua css yang kita bikin ga ngaruh...

Balas

Silahkan mas...hehehe...ada 1 yang saya lupa, jika menggunakan threaded comment, agar foto nya berputar cari kode .comments .avatar-image-container img lakukan hal yang sama seperti di atas.

Balas

sip mas..
kalau untuk avatar comment mungkin saya kasih efek zoom saja, hehe

Balas

Sip dengan begini kita bisa bereksperimen dengan apa saja...

Balas

bookmark dulu mas...! sapa tau besok saya membutuhkannya

Balas

info saja buat sobat yang punya kompas riau tampaknya kode berikut terdeteksi virus kalau bisa diganti dengan yang lain berikut kodenya
http://bengkalispos.googlecode.com/files/bksrandompos.js
berikut screnshotnya

http://1.bp.blogspot.com/-dipEPzzAtQM/UbspL7f73vI/AAAAAAAAB4Y/D_stBwyw08A/s1600/firus.png

Balas

waduh mas kompi, setelah diterapkan, ternyata pada couser post tidak berkerja (tidak berjalan)

Mahfid Mayanto@

terima kasih infonya mas mahfid, saya akan coba memperbaiki nya ^_^

Balas

Wah saya ketinggalan 4 berita, padahal baru sehari ga online...hehehe

Balas
This comment has been removed by the author.

Mas tambahkan webkit seperti ini mas, ini yang saya gunakan di blog saya.

a img {
padding:0px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
border: 2px solid #CCC;
}

a img:hover {
border:2px solid #ccc;
-moz-transform: scale(1.3) rotate(-360deg);
-webkit-transform: scale(1.3) rotate(-360deg);
-o-transform: scale(1.3) rotate(-360deg);
-ms-transform: scale(1.2) rotate(-360deg);
transform: scale(1.3) rotate(-360deg);
}

.post img:hover{-o-transition:all .3s;-moz-transition:all .3s;-webkit-transition:all .3s;-moz-transform:scale(1.3);-o-transform:scale(1.3);-webkit-transform:scale(1.3)}

Untuk : post
a img ganti menjadi ini ~> .post img
a img:hover ganti menjadi ini ~> .post: hover

jika ada kesalahan mohon koreksinya mas makasih

Balas

Pasti deh di semua browser ke detek dengan cara itu mas hehehe... barangkali buat semua blog ya mudah"an sih untuk semua type blog.

Balas

ntar gk valid mas klo pakai -webkit -o -ms

Balas

Ya seperti itu mas Andre...sayangnya itu tidak valid css3 saat ini...tapi saya yakin nanti semua browser pasti mendukung css3.

Balas

Lieur kukurilingan :)

Balas

Iya kang...hehehe...saya juga jadi lieur...jadinya disimpen di homepage we untuk image postnya...

Balas

Masukan dikit buat blognya sob... gimana kalau logo 'kompi ajaib' menjadi clickable, soalnya saya pribadi lebih suka klik logo daripada menu 'home' di samping :)

Balas

Akan saya pertimbangkan kang...makasih masukannya hehehe...

Balas

Kangismet : cara buat konversi kode sama oot caranya gmna ya ?

Balas

Coba masuk ke forumnya kang Ismet dan tanyaka di sana...pasti kang Ismet akan menjawabnya dengan senang hati...bukan begitu kang Ismet?

Balas

kesannya pusing yah mas ?? :D wkwk

Balas

mas kompi, jika kita hanya mau di tampilan gambar berputar pada halaman depan saja gimana ya? setelah saya coba2 lagi, wussss... semua gambar berputar, pusing2 hehehehe....

Balas

Pakai kode ini

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
a img{border-width:0;transition:all 400ms ease-in-out}
a img:hover{opacity:.7;transform:rotate(360deg)}
</style>
</b:if></b:if>


Simpan di bawah kode

]]></b:skin>

Balas

mantap mas kompi, berhasil... thankyu

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×