Banyak cara membuat blog kita tampil cantik dan menarik, selanjutnya bahasan kali ini saya akan mencoba bagaimana cara membuat gambar berputar ketika di sentuh oleh mouse. Teknik ini biasanya disebut dengan Image hover.
Tehnik membuat gambar berputar ini menggunakan kode css yang akan kita letakkan di source html template kita. Tidak sulit untuk menerapkan tutorial ini, hanya dibutuhkan kehati-hatian dan ketelitian ketika meletakkan beberapa kode ke dalam template. Untuk berjaga-jaga jika terjadi kesalahan, ada baiknya sobat melakukan backup terlebih dahulu seluruh isi html template agan
tampa bnyak berkicau,, langsung saja,,
1. Pertama-tama sobat masuk ke bagian edit html dengan menuju bagian template kemudian pilih edit html.
2. Cari kode seperti ini ]]></b:skin> Gunakan ctrl find untuk memudahkan pencarian
3. Copy kode CSS dibawah ini :
2. Cari kode seperti ini ]]></b:skin> Gunakan ctrl find untuk memudahkan pencarian
3. Copy kode CSS dibawah ini :
#gambar {
float: left;
margin: 10px;
overflow: hidden;
position: relative;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
#gambar:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
Kemudian paste tepat diatas kode ]]></b:skin> yang sobat cari tadi. Simpan perubahan template sobat.
4. Buatlah postingan baru dengan judul Cara membuat gambar berputar. masukkan kode dibawah ini kedalam postingan melalui mode html, ingat memasukkannya harus dalam mode html bukan dalam mode Compose.
4. Buatlah postingan baru dengan judul Cara membuat gambar berputar. masukkan kode dibawah ini kedalam postingan melalui mode html, ingat memasukkannya harus dalam mode html bukan dalam mode Compose.
<div id="gambar">
<img src="url Gambar" />
</div>
<img src="url Gambar" />
</div>
5. Ganti url gambar yang berwarna biru dengan url gambar yang ingin sobat tampilkan agar berputar.
Sampai disini tutorial selesai, terimakasih telah membaca artikel ini, mudah2han bermanfaat untuk kini dan nanti.
kalian luar biasa,,
silahkan sobat semua mencobanya pada blog sobat. Untuk posisi gambar bisa langsung di atur melalui pengaturan yang ada di dashboard blog sobat.
Sekian dan terima kasih..
semoga bermanfaat, , ,
Referensi mengenai CSS hover dapat di lihat di w3schools.com.
Sekian dan terima kasih..
semoga bermanfaat, , ,
Referensi mengenai CSS hover dapat di lihat di w3schools.com.
mantap tipsnya gan. salam sukses selalu.
makasih gan,,
amin, terimakasih atas kunjungannya ,
salam blogger,,,