Cara buat Image dan Teks Zoom

Hi Opamer..Opa hadir lagi bawa oleh-oleh ni. Eit tetapi oleh-olehnya bukan makanan atau jajan loh. Opa ada satu pelajaran mungkin ini sangat berguna buat kita semua opamer, Yaitu tentang" Cara buat image zoom dan teks zoom". Nahhh..penasaran bukan? pasti opamer banyak yang mencari tentang pembahasn yang ini. Waduh..PD amat Opa ini hahahaha...Marilah opamer kita mulai belajarnya. Silahkan baca terus dengan teliti agar meresap pelajaran Opa ini. Monggo tutorialnya:

1. Login keBlogger Opamer
2. Tata Letak
3. Edit HTML
4. Cari code ini ]]></b:skin>
5. Copy paste CSS ini diatas kode tadi:

/* Opa-ma.blogspot.com Zoom Efek */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
/* Opa-ma css */
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}

6. Dah Save dulu CSS nya opamer
7. Langkah berikutnya masih ada loh
8. Copy paste script ini dimana saja:

HTML FOR IMAGE ZOOM

<a class="thumbnail" href="http://opa-ma.blogspot.com/2009/06/cara-buat-image-n-teks-zoom.html"><img src="http://img197.imageshack.us/img197/9165/14891716.jpg" border="0" /><span><img src="http://img188.imageshack.us/img188/4526/18458140.jpg" width="280px" height="200px"/></span></a>

Keterangan : Ganti tulisan yang telah Opa warna kuning dengan Url web dan url image opamer
Contoh jadi:


HTML FOR TEKS ZOOM

<a class="thumbnail" href="http://opa-ma.blogspot.com/2009/06/cara-buat-image-n-teks-zoom.html">Icon SEO<span><img src="http://img197.imageshack.us/img197/9165/14891716.jpg" /></span></a>

Keterangan : Ganti tulisan yang telah Opa warna kuning dengan Url web dan url image opamer
Contoh jadi:
Opa-ma.blogspot



NB: Ini juga bisa dipasang di website loh.. caranya hampir sama.
SELAMAT BERBAHAGIA YANG LAGI MENIKMATI LIBUR SEKOLAH....OYI?

sumber : opama