Pages

Senin, 21 Mei 2012

Cara Membuat Gambar Berputar Dipostingan Blog

Sebelumnya sudah pernah saya share tentang Membuat Efek ZOOM pada Gambar di Blog, Nah sekarang akan saya share tips yang lain yaitu  Cara Membuat Gambar Berputar Dipostingan Blog, pengen tau gimana hasilnya? berikut hasilnya :



Galery Zone

Jika agan tertarik dengan tips ini, silahkan ikuti petunjuk cara membuatnya berikut ini.

  • login ke blogger anda.
  • pilih Rancangan »» Edit HTML , Jangan lupa untuk beckup template terlebih dahulu.
  • Centang Expand Template Widget. 
  • Tempatkan kode berikut diatas kode ]]></b:skin>


.galeryzoneberputar img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out}
.galeryzoneberputar img:hover{-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}

  • terakhir klik SIMPAN/SAVE
Kemudian dalam penulisan kode gambarnya seperti ini dan harus pada mode ''Edit HTML'' bukan pada mode Compose

<div class="galeryzoneberputar"><img src="http://link-gambar-kamu.jpg" /></div>



Jika ingin mengatur ukuran gambarnya sebelum pointer mouse melintas diatasnya (gambar default tampilan) tinggal menambahkan kode height="nilai-tinggi" weight="nilai-lebar" Dan nantinya akan menjadi seperti
berikut  

<div class="galeryzoneberputar"><img src="http://link-gambar-kamu.jpg" height="nilai-tinggi" width="nilai-lebar" /></a></div>


Demikian Cara Membuat Gambar Berputar Dipostingan Blog, mudah bukan?
Semoga bermanfaat.


Copyright : Galery Zone - : http://galeryzone.blogspot.com/2012/04/cara-membuat-gambar-berputar.html#ixzz1vVAm7mdT

1 komentar:

Ikan