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>
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
Langkah selanjutnya
Klik Entri Baru
Pilih HTML
Pada kolom HTML pastekan kode script di bawah ini:
Keterangan:
» Kode berwarna biru merupakan alamat blog, gantilah alamat tersebut dengan alamat blog kalian
» Kode berwarna merah merupakan URL gambar yang ingin kalian sisipkan
<div id="denzuaz">
<a href="http://www.maskusyani.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi-UJW4HsZ77Oi9wspfNtCdBLNtKo7Lqag4x5AAUPBqz1B1-WkSJvjmCWE_n86jpBzon355H4VZ9M63GyHJqG8JpFnXGTXlMf6ZrNlwznQ0oXZrc1ZFkR7q_d_B_Y1ZFgse7vjNw3JAkc/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.
Posting Komentar