Cara Membuat Gambar Bisa Diputar Seri 2

Tutorial ini masih membahas sekitar tentang " Cara Membuat Gambar Bisa Diputar ", dimana pada ke-
sempatan kali ini untuk seri yang ke-2 (dua). Bila
pada seri yang pertama menggunakan tombol sebagai
pemutarnya, maka untuk seri yang kedua ini cukup
hanya dengan meletakkan cursor di atas gambarnya,
maka gambar tersebut secara otomatis akan berputar.
Kelebihan dari seri 2 (dua) ini, selain gambar, kita juga
bisa menerapkannya pada text. Tapi tidak hanya itu,
gambar atau text tersebut disisipi juga dengan efek
hover sehingga semakin menambah kesan lebih dari
seri yang sebelumnya. Untuk contohnya, silahkan
letakkan cursor anda tepat di atas gambar atau text
yang tertera di bawah ini :




Sudahkah anda FOLLOW blog ini ?
Bila belum, isilah terlebih dahulu ...
sebelum menggunakan tutorial ini.

Anda tertarik ingin mencoba tutorial ini ?
Langkahnya adalah sebagai berikut :

1.   Masuk -> Edit HTML

2.   Cari kode </b:skin>

3.   Letakkanlah di atas kode </b:skin> ini,
      kode berikut ini :

.rotation {<br /> transform: rotate(0deg);<br /> -webkit-transform: rotate(0deg);<br /> -moz-transform: rotate(0deg);<br /> opacity:0.5;<br /> filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);<br /> -moz-opacity:0.5;<br /> -khtml-opacity:0.5;<br /> }<br /> <br /> .rotation:hover {<br /> transform: rotate(-10deg);<br /> -webkit-transform: rotate(-10deg);<br /> -moz-transform: rotate(-10deg);<br /> opacity:1.0;<br /> filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);<br /> -moz-opacity:1.0;<br /> -khtml-opacity:1;<br /> }

4.  Simpan template anda.

KETERANGAN =

Ubahlah angka perputaran gambarnya
pada kode (-10deg). Ada 3 (tiga) tempat
yang harus anda ubah.

Semakin besar angkanya, maka akan semakin
berputar gambarnya. Contohnya : (-45deg).

Tanda minus ( - ) berarti ke arah kiri, bila anda
ingin ke arah kanan, hilangkan tanda tersebut.
Contohnya : (10deg).

Untuk penerapan kode pada gambar atau textnya :

1.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript

2.   Masukkan dalam kontennya
      kode berikut ini :

Untuk Gambar :

<a class="rotation" href="URL di sini"><img border="0" src="URL gambar di sini"/></a>

Untuk Teks :

<a class="rotation">TEKS LETAKKAN DI SINI</a>

KETERANGAN =

Selain di Sidebar, anda juga bisa meletakkan
kode ini pada postingan.

Masukkan URL link anda pada kode URL di sini.

Masukkan gambar anda pada kode URL gambar di sini.

Masukkan teks anda pada kode

TEKS LETAKKAN DI SINI.

Selamat mencoba, good luck!