Home » » Cara Membuat Gambar Berputar Dan Membesar Saat Tersentuh Kursor

Cara Membuat Gambar Berputar Dan Membesar Saat Tersentuh Kursor

Trik membuat gambar berputar dan membesar pada saat kursor menyentuh gambar,  mungkin sudah menjadi rahasia umum, karena banyak dari para blogger yang menggunakan trik seperti ini di dalam tulisan mereka dan hasilnya banyak dari para pengunjung yang menyukai efek ini.

Baca juga: Cara Merubah Bentuk Kursor Diblog

Selanjutnya bagaimana cara membuat efek ini...? Silahkan perhatikan langkah-langkah berikut ini:

Masuk ke Blog
Pilih Tema
Pilih Edit HTML (klik backup/pulihkan untuk berjaga-jaga)
Pada kolom edit HTML cari kode </head>
Untuk mempercepat pencarian kode, pada kolom html, klik kanan di mana saja lalu tekan CTRL+F Akan muncul kolom pencarian di pojok kanan atas.
Ketikan kode </head> di kolom pencarian lalu tekan Enter

Setelah menemukan kode tersebut pastekan kode script di bawah ini, tepat di atas kode </head>.

<style>#denzuaz 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;}
#denzuaz img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>

 Simpan Template.
Langkah selanjutnya
 Klik Entri Baru
Pilih HTML
Pada kolom HTML pastekan kode script di bawah ini:

<div id="denzuaz">
<a href="http://www.maskusyani.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjlUl0ZTyijjezSXUjJP6P7gEUaT4ALWSXJorT5IGdxrIA0rCh5-pifWTFsLdGJ9BzLdAZvHdF93jyMUrXwNrktihCq4K2qszzIXJXj0TXULch9hdBycmD5_AofoMQqeYXzQcFtq9XXIU/w78-h140-p/IMG_20170128_080132.jpg" /></a></div>

Keterangan:
» Kode berwarna biru merupakan alamat blog, gantilah alamat tersebut dengan alamat blog kalian
» Kode berwarna merah merupakan URL gambar yang ingin kalian sisipkan

Klik Pratinjau untuk melihat gambar yang di pasang.
Untuk mencoba gambar bisa berputar dan membesar saat tersentuh kursor silahkan Publikasikan dulu artikel kalian.

Demikian artikel tentang Cara Membuat Gambar Berputar dan Membesar Saat Tersentuh Kursor.
Semoga bermanfaat dan selamat mencoba.

0 komentar:

Posting Komentar

TRANSLATE / MASKUS

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified

CONTOH 1

Recent Posts
Kembali ke atas