Efek Gambar Memutar

Efek Gambar Memutar
Di Posting Oleh : Admin
Kategori : Template Tips-Trik Tutorial Blog Tutorial, Teknologi dan Kesehatan: Mangaip Blog

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!!!

Komentar

Postingan populer dari blog ini

Peluang Mendapatkan Piting, Straight Flush, dan Dragon dalam Capsa Banting

Logika Matematika - Part 1

Logika Matematika - Part 2