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



3 comments:

nazz berkata...

Aku suka tutorial yg ni.. nanti bila ada masa aku nak cuba... thankssss

~JuNnIE~ berkata...

NICE TUTORIAL...NAK TRY GAK..=)
TP STEP 5 & SETERUSNYER TU AGAK KURANG FAHAM...:X

deenoh berkata...

Junie: gunakan kod distep 5 setiap kali anda ingin buat gambar resaiz diposting atau add a gadget (sidebar)

:)) ;)) ;;) :D ;) :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Catat Ulasan

Komenlah sesuka hati anda kerana tuan empunya blog ini buta hati dan buta perasaan tetapi tidak buta mata.

 

Pelawat

free counters
BlogInfoTips

Pengikut

Recent Comments

Powered by Deenoh

© Copyright 2007-2009. Blog tutorial . All rightsreserved | Bloginfotips.com is proudly powered by Blogger.com | Template redesign by Deenoh