Thursday, March 7, 2013

Cara Membuat Gambar Membesar Pada Saat Disorot Mouse

Bulituk.blogspot.com - Cara Membuat gambar pada bagian posting membesar ketika gambar tersebut disorot pointer mouse sangat mudah karena kita khususnya para blogger cukup memasang kode di bawah ini bersama kode css yang lain. Sebelum kita lanjutkan, sebagai contoh saja silahkan coba dulu sorot gambar di bawah ini, seperti inilah yang akan terjadi pada saat mouse menyorot gambar di bawah ini:





  •  Membuat efek seperti ini hanya pada Laman
Lebih jelasnya masuk ke blogger kemudian pilih laman, edit html lalu letakan kode di bawah ini di atas kode script gambar yang ada di laman anda.,

<style type='text/css'>
.post .post-body img:hover{-o-transition:all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform:scale(1.2); -o-transform:scale(1.2); -webkit-transform:scale(1.2);}
</style>

Jika sudah simpan dan lihat hasilnya.

  • Membuat efek seperti ini hanya ada pada halaman postingan, silahkan coba cara berikut:
insert gambar melalui compose
apabila gambar sudah terupload, ganti mode Compse ke mode HTML
kemudian copy code di bawah, lalu paste di atas script gambar yang tadi kita upload

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.post .post-body img:hover{-o-transition:all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform:scale(1.2); -o-transform:scale(1.2); -webkit-transform:scale(1.2);}
</style>
</b:if>


Contoh:

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.post .post-body img:hover{-o-transition:all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform:scale(1.2); -o-transform:scale(1.2); -webkit-transform:scale(1.2);}
</style>
</b:if>

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlYoc0Qar9CxrS7KIz_xLj9GpnQGXABn311Dkb7-B5kv34pQ1T-dMzdrQR__6Bo6WHS5aQHa7k0N5W_hV_x-MfoZ8uc-bmE8xuKTch0Qh0Tgor7Ikwfw9d_8Er8ZKZD-4eXC-fq49RcTcj/s1600/OP-WEB+1+copy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="52" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlYoc0Qar9CxrS7KIz_xLj9GpnQGXABn311Dkb7-B5kv34pQ1T-dMzdrQR__6Bo6WHS5aQHa7k0N5W_hV_x-MfoZ8uc-bmE8xuKTch0Qh0Tgor7Ikwfw9d_8Er8ZKZD-4eXC-fq49RcTcj/s320/OP-WEB+1+copy.png" width="320" /></a></div>


 Kemudian perbarui postingan anda dan Jreenngngng.. Lihat hasilnya..!!!

Tulisan Warna orange adalah Kode script gambar. Silahkan ganti dengan kode script gambar anda
Selamat mencoba :)