Cara Membuat Gambar Berputar dan Membesar saat di Sorot

Perlu dibaca juga :

Berkreasi dalam dunia blogging memang sangat menyenangkan, sampai sampai tidak terasa lagi waktu yang telah berlalu. dalam dunia blogging, tampilan sebuah blog yang memiliki kreasi tinggi akan menambah pengunjung berminat untuk berkunjung ke blog tersebut, apalagi di tambah dengan artikel-artikel yang sangat menarik, akan semakin mendongkrak jumlah pengunjung.

Kali ini saya akan berbagi tentang cara membuat gambar dalam posting blog berputar dan membesar saat di sentung oleh cursor, untuk contohnya coba sobat arahkan cursor ke gambar Pinguin Linux di atas, maka gambar akan berputar dan membesar. Apabila anda berminat untuk mencobanya silakan diikuti langkah-langkah nya seperti berikut :

1. Seperti biasa pertama harus login dulu di akun blogger

2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan

3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan download dulu template lengkapnya.

4. Lalu cari kode </head>

5. Setelah ketemu kemudian copy paste kan code 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>

6. Setelah itu klik save / simpan template.

Langkah selanjutnya untuk proses penenpatan gambarnya dalam postingan.

1. Anda harus menambahkan kode  <div id="denzuaz"> sebelum url gambar dan jangan lupa di tutup dengan kode </div> contoh seperti di bawah ini:

<div id="denzuaz">
<a href="http://adituek.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwLJdMDQmsDl3Co1ZPUKrgnN-uxFSzC6z3ple3R1tIYAPBhhyFPYoGRVBcRDJLVezTZKmuOn8sQKyGw2SSLoo3R-o3rEM801UF_D5wGPhEYWUotmUtapb3qpIJBy4h10sTnj-0a1psFLHR/s200/naruto+dont+copy.png" /></a></div>

keterangan:

1. kode berwarna merah adala kode pembuka dan penutup
2. kode berwarna biru silakan ganti dengan URL blog anda dan URL gambar yang ingin anda pasang di dalam postingan.
3. Setelah semuanya selesai klik publikasikan. 

Demikianlah uraian saya kali ini mengenai bagaimana cara membuat sebuah gambar berputar dan membesar saat di sorot. Mudah-mudahan bermanfaat dan selamat mencoba. Jangan lupa tinggalkan koment anda ya.....

ARTIKEL TERKAIT :