MOHON PERHATIAN!!!........ Sehubungan sedang "ERROR"nya situs HTTP://WWW.RIPWAY.COM, maka bila Anda menemukan tutorial yang menggunakan kode dengan nama situs tersebut, sementara waktu JANGANLAH Anda gunakan. Mohon maaf, semoga anda memakluminya.............................

Mengucapkan Selamat Datang, Semoga Dapat Berkenan Di Hati Anda


SYAMSUDINNAMAKU telah hadir

Cara Membuat Efek Zoom di Blog

Dari judulnya, anda mungkin sudah mengerti maksudnya.
Ya anda benar, sesuai namanya zoom itu berarti diper-
besar. Bahasa gamblangnya, sesuatu yang dalam hal ini
adalah gambar yang aslinya bentuk ukurannya kecil
takkala terlintas cursor pointer di atasnya maka gambar
tersebut akan berubah menjadi lebih besar ukurannya
dari ukurannya semula. Untuk lebih jelas lagi, coba saja
anda letakkan cursor anda tepat berada di atas gambar
wanita cantik di bawah ini.

Photobucket

Coba juga letakkan cursor anda di atas tulisan yang
'Berwarna Biru' yang ada di bawah ini dan coba anda
perhatikan apa yang terjadi dengan tulisan tersebut ?

LIHAT GAMBAR INI

Nah, itu yang dimaksud dengan efek zoom yang kita
bicarakan pada kesempatan kali ini.

Coba saja deh efek zoom ini anda terapkan di blog
anda, selain dapat menghemat ruang, efek ini juga
bisa memperindah penampilan blog kita. Makanya
kalau anda mau coba, ikutilah petunjuk ini :

1.   Silahkan login ke Blog anda.
2.   Di area Dasbor klik Edit HTML.
3.   Centang Expand Template Widget.
4.   Sebelum melanjukan, copy dahulu kode css
      yang tertera di bawah ini :

/* Zoom Efek
----------------------------------------------- */
.thumbnail{position:relative;z-index:0}
.thumbnail:hover{background-color:transparent;z-index:50}
.thumbnail span{position:absolute;left:-1000px;visibility:hidden;
color: black;text-decoration: none}
.thumbnail span img{border-width:1;padding:2px}
.thumbnail:hover span {visibility: visible; top: 0; left: 50px}

5.   Letakkan kode css tersebut, di atas kode ]]></b:skin>
6.   Simpan template anda.
7.   Siapkan gambar yang akan anda beri efek zoom,
      upload ke web hosting anda dan copy kode
8.   Copy juga kode berikut ini dan tempatkan di tempat
      yang anda inginkan, di sidebar atau bisa juga pada
      postingan anda.



►  KODE HTML UNTUK GAMBAR ZOOM :

<a class="thumbnail" href="http://www.blogger.com/post-edit.g?blogID=8287053043450086996&amp;postID=1711738123524367907#thumb"><img alt="Photobucket" border="0" src="http://i1128.photobucket.com/albums/m486/syamsudin1/zoom_100.jpg" /><img ;="" height="236px" src="http://i1128.photobucket.com/albums/m486/syamsudin1/zoom_100.jpg" width="200px" /></a></div>



►  KODE HTML UNTUK TEKS ZOOM :

<a class="thumbnail" href="http://www.blogger.com/post-edit.g?blogID=8287053043450086996&amp;postID=1711738123524367907#thumb">LIHAT GAMBAR INI<img src="http://i1128.photobucket.com/albums/m486/syamsudin1/zoom_200.jpg" /></a>



9.   Silahkan anda pratinjau dahulu.
      Selesai.


■   CATATAN :

•    Ganti url gamrbar dengan url gambar milik anda.
•    Rubah ukuran gambar zoom (width dan height) nya
     sesuka hati anda.
•    Sedangkan untuk merubah letak/posisi gambar zoom
      nya, anda rubah pada kode yang anda letakkan
      di atas ]]></b:skin> tadi.

♥   Semoga anda berhasil.
     Selalu Good luck!


2 comments:

Syamsudin mengatakan...

Silahkan Anda berkomentar apa saja ....
atau dlm bahasa Inggrisnya : " SE-ENAK
NDASMU ". Tapi, tunjukkanlah jati diri,
agar yg lain tau, siapa yg berkomentar?
Setankah? Manusiakah? Bila Anda manusia,
tunjukkan pula bahwa Anda seorang
terpelajar yang mengerti sopan santun
dan ber-tata bahasa yg benar.

Krido Suseno mengatakan...

mantap gan...
http://lirikdangitar.blogspot.com

Poskan Komentar