Membuat Gambar Berputar 360 Derajat di Blog

Ahmad Fawzan Rohman Sabtu, Juli 21, 2012

Berawal dari sebuah komentar dari sahabat blogger, sebenernya ni udah dulu aq mu share berhubung kesibukan di dunia nyata jadina tersimpan di draft jadi g ke urus, tq dah ngingetin gan, membuat gambar di blog berputar 360 derajat maksudnya gmn sih..? gini ketika kursor diarahkan ke gambar, gambar tersebut akan berputar 360 derajat  seperti yang anda lihat di blog ini, caranya gmn? caranya gampang kok, tinggal ikutin caranya berikut :

• Login dulu ke akun blogger 
• Klik rancangan - edit html ( antar muka blogger lawas  ), klik template kemudian klik edit html ( untuk yang pake blogger tampilan baru )
• Tekan CTRL F kemudian cari kode a img, mungkin ada yang berbeda kodenya tiap2 template, pokok intinya kode gambar. hapus kode setelah kode a img biasanya berawalan { dan berakhiran }, dan copas kode dibawah ini setelah kode a img

{ border-radius: 9px; -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}
a img:hover{-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}

Kira-kira hasilnya kan seperti ini

a img { border-radius: 9px; -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}
a img:hover{-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}

Nah terakhir simpan template anda dan silahkan di coba, ni kode cuman bekerja pada mozila firefox bowser, untuk google chrome g bisa alias ketika kursor diarahkan ke gambar bukannya berputar malah menghilang ( kedap kedip ), selamat mencoba mungkin dari para master ada yang mu nambahin atau kritik inilah yang saya harapkan. berhasil kah ? komentar ya..

Apakah cara diatas terlalu sulit ? ni ada cara lain, mungkin ni lebih gampang,  apa bedanya dengan cara yang diatas..? ya tentu beda klo yang diatas kita tidak perlu mensettingnya satu persatu sedangkan untuk cara yang kedua ini jika kita menginginkan hanya pada gambar yang kita inginkan, berikut caranya :

• Langkahnya sama dengan yang diatas
• klik pada edit HTML kemudian CTRL F cari kode  ]]></b:skin> dan letakkan/copas kode berikut diatas kode ]]></b:skin>

/*begin nxnx*/
.picnx 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}
.picnx img:hover{-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}
/*end nxnx*/

• Save template anda

Bagaimana mengaplikasikannya pada gambar.. ? anda hanya menambahkan <div class="picnx">kode HTML gambar</div>

Contoh :  

<div class="picnx"><a href="http://i997.photobucket.com/albums/af96/fauzan_zifa/bismillah.gif" imageanchor="1"><img alt="Bismillah" border="0" height="29" src="http://i997.photobucket.com/albums/af96/fauzan_zifa/bismillah.gif" title="Bismillah" width="200" /></a></div>