Cara membuat efek membesar pada gambar

OK...., bila anda berminat, silahkan anda ikuti langkah - langkah berikut :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.







4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<style type="text/css">
#zoomimage div {
height:100px;
width:100px;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;}

#zoomimage div:hover {
padding-top:0;
padding-left:0;
padding-top:0;
padding-right:0;
-webkit-transform:scale(3,3);
-moz-transform:scale(3,3);}

#zoomimage img {
border: 3px solid #D8D8D8;
border-style:double;
}
</style>

Catatan :

• Anda bisa mengatur posisi gambar pada saat membesar, baik kearah kekiri, kekanan, dan kebawah. Anda tinggal mengganti nilai "0" pada kode - kode :

padding-top:0;

padding-left:0;

padding-top:0;

padding-right:0;

6. Simpan Template.

7. Langkah selanjutnya, anda tinggal copy kode dibawah ini dan anda bisa taruh kode gambar ini pada gadget atau akan dipasang pada artikel post anda untuk menampilkan gambar dengan efek membesar, silahkan ... itu terserah anda.

<center>

<div id="zoomimage">

<div class="hover"><a href="http://si-owner.blogspot.com" target="_blank"><img src="https://lh3.googleusercontent.com/-gjMAmm0g4qA/T9NKc8KgqtI/AAAAAAAAAA4/TfYen1Zi1FQ/s512/ROHMAN.jpg" width="100" height="100"/></a>

</div></div></center>

catatan :

- Ganti ULR blog dan ULR image dengan ULR milik anda.

Nah....Mudah kan...?
Silahkan anda coba dan diotak atik sendiri sesuka selera anda.
Semoga bermanfaat....

Sumber Artikel: http://si-owner.blogspot.com/2012/06/cara-membuat-efek-membesar-pada-gambar.html#ixzz27f2guhWO