Cara Membuat Efek Gambar Berputar di Blog

Cara Membuat Efek Gambar Berputar di Blog - Ficri Pebriyana
Cara Membuat Efek Gambar Berputar di Blog - Membuat tampilan gambar berputar 360 derajat saat cursor atau mouse diarahkan di atas gambar merupakan suatu cara untuk mempercantik tampilan blog. Dengan memberikan efek berputar pada gambar ketika mouse diletakan diatas gambar tersebut sangatlah menarik dan juga memperbesar ukuran gambar secara otomatis. Efek gambar berputar ini hanya untuk gambar dibagian posting atau artikel gambar lainnya kemungkinan tidak akan berputar seperti pada gambar postingan atau artikel.

Pada kesempatan kali ini blog Ficri Pebriyana akan membuat sebuah tutorial Cara Membuat Efek Gambar Berputar di Blog, dengan memberikan efek berputar serta zoom atau memperbesar gambar secara otomatis ketika cursor atau mouse diletakan diatas gambar tersebut maka akan sedikit lebih bagus dan simpel bagi blog yang posting dengan memiliki banyak gambar, oleh karena itu dengan memberikan efek berputar pada gambar di blog ini akan sangat membantu visitor melihat gambar yang Anda kirimkan untuk pengunjung atau visitor lihat. Langsung saja bagi kalian yang ingin mengetahui cara membuat gambar berputar diblog silahkan baca dibawah ini :

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode CSS dibawah ini, lalu Paste diatas kode ]]></b:skin>
/*Image Rotate*/
.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.5) rotate(360deg) translate(0px);-moz-transform:scale(1.5) rotate(360deg) translate(0px);-webkit-transform:scale(1.5) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}
Catatan :
Semakin besar nilai dari kode berwarna Hijau, maka kecepatan berputas semakin lama.
Semakin besar nilai dari kode berwarna Biru, maka gambar akan semakin besar.

5. Klik Simpan Template

Dengan menggunakan kode css diatas memang sudah valid CSS3, tetapi akan menimbulkan warning pada css level 3, namun Anda tidak perlu khawatir karena kode warning yang muncul pada css3 ini memang tidak mempengaruhi terhadap kualitas blog jadi masih ama saja untuk dipakai.

Cara Membuat Efek Membesar atau Zoom Pada Gambar

Sekian artikel mengenai Cara Membuat Efek Gambar Berputar di Blog. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

9 Komentar untuk "Cara Membuat Efek Gambar Berputar di Blog"

  1. bisa di coba nih tipsnya mas ficri
    izin praktek mas, thanks buat ilmunya :)

    BalasHapus
  2. Boleh coba yaaah :D
    Terima Kasih dan Salam Kenal :)

    BalasHapus
  3. Thankz.. infox sgt membantu...

    BalasHapus
  4. Thank buat infonya....cba praktek mas...

    BalasHapus
  5. sudah dipraktekkan dan tidak bisa mas

    BalasHapus
  6. bagus, makasih gan ngebantu sekaliii ^^)

    BalasHapus

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Fast Hosting