Menciptakan Gambar Berputar Saat Disentuh Mouse

Membuat Tampilan Gambar Berputar Di Blog , maka secara otomatis semua gambar yang anda buat disetiap artikel blog akan berputar saat disentuh mouse dan gambar akan kembali ke bentuk semula jika mouse tidak menyentuhnya.
Tujuan Membuat Gambar Berputar Di Blog hanya untuk membuat tampilan blog lebih menarik, karena penampilan adalah hal yang utama untuk menarik visitor agar mau berlama-lama di blog kita, daripada menambahkan widget tertentu yang pastinya akan membuat loading blog jadi berat. Dengan Membuat Tampilan Gambar Berputar Di Blog maka tampilan blog lebih menarik karena tidak akan mempengaruhi loading blog jadi berat.

Inilah caranya :

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.

Wasalam...
Previous
Next Post »