Pernahkan sobat menjumpai gambar posting berputar ketika disorot oleh kursor. Ini digunakan agar tampilan blog sedikit lebih menarik. Kalau sobat blogger tertarik dan penasaran gimana cara membuatnya? Silahkan ikuti langkah – langkah cara membuatnya berikut ini :
- Login blogger Anda
- Pilih Template > Edit HTML > klik Expand Template Widget
- Cari kode ]]></b:skin> (seperti biasa gunakan Ctrl + F)
- Copy kode dibawah ini dan Paste tepat diatas kode ]]></b:skin>
.blogatap 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}
.blogatap img:hover{-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}
- Kemudian Klik Simpan
Kemudian penulisan kode gambar entri atau posting seperti berikut (penulisan di HTML bukan Compose)
<div class="blogatap"><img src="http://link-gambar-anda.jpg" /></div> Tapi kalau ingin mengatur ukuran gambar, kita bisa menambahkan kode height dan weight, dan nantinya akan menjadi seperti ini :
<div class="blogatap"><img src="http://link-gambar-anda.jpg" height="ukuran-tinggi" width="ukuran-lebar" /></a></div>
Selamat mencoba dan semoga bermanfaat.
