Events

Headlines News :
Home » » Cara Membuat Gambar Berputar Dan Membesar Saat Tersentuh Kursor

Cara Membuat Gambar Berputar Dan Membesar Saat Tersentuh Kursor

Written By Maskusyani on Rabu, 26 April 2017 | 21.26

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/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.
Share this post :

Posting Komentar

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. SEDULIT COM - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger