Rabu, 21 Juli 2010

Efek Gambar Memutar

Setelah pada postingan yang lalu membahas beberapa efek gambar seperti efek perbesaran dan efek redup/terang, maka kali ini efek gambar yang ingin saya bahas adalah efek gambar memutar. Contohnya bisa anda lihat pada gambar, yang sebelah kiri adalah kondisi gambar yang biasa, dan yang sebelah kanan adalah gambar yang memutar dan membesar pada waktu mouse hover.

Cara membuatnya? Begini.

1. Login ke Blogger, lalu, klik Rancangan > Edit HTML.

2. Backup template anda terlebih dahulu.

3. Cari kode ]]></b:skin>, lalu taruh kode berikut diatasnya.
.putar:hover{
-moz-transform:rotate(22.5deg) scale(1.50);
-webkit-transform:rotate(22.5deg) scale(1.50);
}
4. Kalau sudah, klik Simpan Template.

Live Preview!


Untuk memasukkannya ke blog, pilih Rancangan > Elemen Halaman > Tambah Gadget > HTML/Javascript. Lalu pada bagian isi ketikkan kode berikut:
<a href="LINKYANGDIINGINKAN"><img src="URLGAMBAR" class="putar"/></a>

LINKYANGDIINGINKAN adalah link yang diinginkan, sedangkan URLGAMBAR adalah URL dari gambar.

Anda juga bisa meletakkannya di postingan blog anda. Pada mode Edit HTML tentunya. Semoga bermanfaat!!!
di

8 komentar:

  1. Babtista21 Juli 2010 pukul 06.15

    pertamaxx..tx infonya kang

    BalasHapus
  2. Dayat21 Juli 2010 pukul 20.17

    Keduak diamankan,,,

    korban forum sebelah...

    nice info deh...

    BalasHapus
  3. Pradina24 Juli 2010 pukul 18.47

    Bguss bngt info'e trutma buat klangna pelajjar .. :P

    BalasHapus
  4. Software Komputer26 Juli 2010 pukul 02.44

    Baru sempat mampir nih!
    Liat-liat dulu....
    Situsnya bagus nih!
    apalagi artikelnya, menarik banget!
    Saya seperti disuguhi makan enak!
    hehehehehhehehe

    Oia Kunjungan balik ya sob, ini blog saya
    http://ilmu-komputer23.blogspot.com/
    Salam kenal....

    BalasHapus
  5. How to Detect Fake Pagerank27 Juli 2010 pukul 13.01

    wah keren juga ni

    BalasHapus
  6. Baju Anak Islami5 Agustus 2010 pukul 08.32

    Satu lagi...info keren..secara blog saya juga banyak makai gambar...yg satu ini bikin melek dan postingan jd gak ngebosenin...thanks ya

    BalasHapus
  7. Anonim27 Oktober 2010 pukul 14.15

    moz dan webkit itu nama variabel apa yah?

    BalasHapus
  8. Muhammad Rizki Fadillah31 Oktober 2010 pukul 09.23

    @Anonim

    moz dan webkit itu bukan variabel. Itu properti CSS3. Moz itu untuk Firefox, trus webkit itu utk opera.

    BalasHapus

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.