Membuat image resaizer/popup

Tutorial widget kali ini penulis akan menunjukkan cara bagaimana membuat image atau gambar jadi besar (popup) di blog.Tutorial ini sangat bagus buat yang suka mempamerkan koleksi foto-foto di blognya.Teknik ini hanya perlu sedikit coding css di template anda. Kalau x paham, lihat contoh gambar di bawah ini.Arahkan kursor ke image tersebut.

Majlis Perkahwinan Zaid


Bersama Rakan sekerja.

Amacam.Mahu mempelajari tutorial widget ini..

1) Login ke blog anda,kemudian pilih Layout--->Edit html

2) Cari kod ini ]]></b:skin>

3) Kemudian copy kod css dibawah ini dan pastekan diatas kod ]]></b:skin>

.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 */

}

4) Lepas tu preview dulu blog anda,jika tiada sebarang error yg muncul, baru klik save.

5) Kemudian anda wajib menggunakan kod html dibawah ini untuk mengapplikasikan css kod tadi.

<a class="thumbnail" href="#thumb"><img src="Image URL" width="100px" height="66px" border="0" /><span><img src="Image URL" /><br />YOUR TEXT</span></a>

6) Gantikan Image URL dengan image anda sendiri dan juga YOUR TEXT dengan ayat anda sendiri.

P.S. Pastikan saiz image anda bersesuaian dengan tempat dimana anda hendak letakkan gambar tersebut samada di post,sidebar,footer atau header.

Mungkin artikel dibawah yang sedang anda cari