Selasa, 17 September 2013

Cara Membuat Efek Gambar Berputar saat Mouse Lewat di Blog

spin


Kembali lagi membagikan tips blogger, kali ini saya membagikan CSS efek gambar berputar saat mouse lewat. Untuk demo download dokumennya disini.
Sudah liat demo nya ? Jika kalian berminat ikuti langkah berikut :

1. Login ke akun blogger kalian, lalu pada dashboard klik menu dropdown dan pilih template
Biasakan backup template kalian sebelum mengedit template

2. Pada template klik 'Edit HTML'
 
edit html
 
3. Nah sekarang pada form edit template cari kode <b:skin> (Klik formnya lalu tekan Ctrl+F untuk pencarian)

4. Copy kode CSS dibawah lalu  paste dibawah kode <b:skin>
 
img {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
}
 
 
Catatan :
 - Angka berwarna merah bisa diganti, itu adalah nilai kecepatan transisi. 0.5s berarti waktu perputaran 0.5 detik.
- Angka berwarna oranye (360) bisa diganti, 360 berarti gambar berputar 360 derajat ke kiri. Bisa juga misalnya 27 derajat, berarti gambar menjadi miring. Atau tambah minus ("-") di depan angka untuk membalikkan arah perputaran. Contoh : -360deg berarti berputar ke kanan.

5. Setelah itu klik tombol Simpan template. Sekarang cek blog kalian..jika efeknya berhasil...selamat !! :)

Semoga bermanfaat..good luck :)

11 komentar:

  1. Trims infonya gan
    salam monfoort.com

    BalasHapus
    Balasan
    1. sama" gan...
      trims udah berkunjung :D

      Hapus
  2. nice info

    http://sadrachkurniawan.blogspot.com/2013/09/naruto-episode-647-versi-teks.html

    BalasHapus
  3. wah masih muda n puinteeer banget, ajarin dong buat emak2 macam saya. Thks ya

    BalasHapus
  4. wow gooooooooood top makasih ya mas triknya. pokonya maknyus lah.

    BalasHapus
  5. mantap tipsnya gan. salam sukses selalu.

    BalasHapus
  6. infonya kerensob
    Membuat Efek Zoom Berputar Pada Gambar di Blog | Giribig http://go.idcheat.com/1j1DqUW

    BalasHapus

Silahkan tinggalkan komentar ya :) Terimakasih...

 
Related Posts Plugin for WordPress, Blogger...