cara susun gambar pada posting

Menyusun gambar semasa posting adalah satu perkara yang menyukarkan kerana kebiasannya gambar akan berada dibawah.Kalau dapat diletak sebelah menyebelah tentulah nampak lebih kemas dan menjimatkan ruangan.Sebagai contoh seperti gambar dibawah ini:

red flower

flower

fancy flower

Kebiasaanya akan jadi seperti ini tersusun menjadi tiga baris.
untuk mengubahnya kita perlu masuk ke mode edit HTML

edit template


Dari compose klik pada mode edit HTML dan akan terpapar kod seperti dibawah :

<div style="float: left;">
<a href="http://3.bp.blogspot.com/_yqzcBmyK-mo/TQ_9RDCCofI/AAAAAAAABME/52JQH17043U/s1600/images.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_yqzcBmyK-mo/TQ_9RDCCofI/AAAAAAAABME/52JQH17043U/s1600/images.jpeg" /></a></div>
</div>
<div style="float: left;">
<a href="http://2.bp.blogspot.com/_yqzcBmyK-mo/TQ_9UdaeFhI/AAAAAAAABMI/xlHWiErFfnY/s1600/imagesd.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_yqzcBmyK-mo/TQ_9UdaeFhI/AAAAAAAABMI/xlHWiErFfnY/s1600/imagesd.jpeg" /></a></div>
</div>
<div style="float: left;">
<a href="http://4.bp.blogspot.com/_yqzcBmyK-mo/TQ_9Y0GoLnI/AAAAAAAABMM/hbFiZeCEP5g/s1600/flower.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="http://4.bp.blogspot.com/_yqzcBmyK-mo/TQ_9Y0GoLnI/AAAAAAAABMM/hbFiZeCEP5g/s200/flower.jpg" width="200" /></a></div>
</div>
<div style="clear: both;" /> <div/>

Tambahkan kod warna hijau pada kod gambar seperti diatas

Hasilnya:
red flower
bunga merah
flower
Bunga rose
fancy flower
Warna warni


Jika gambar turun juga kebawah(ukuran melebihi ruang) letak atau ubah saiz gambar pada kod.Kalau tak ada pada kod kena tambah seperti dibawah.Perhatikan juga pada kod kadang kadang dah ada(kena periksa jgn ada kod lebih :) ) :


<a href="http://4.bp.blogspot.com/_yqzcBmyK-mo/TQ_9Y0GoLnI/AAAAAAAABMM/hbFiZeCEP5g/s1600/flower.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_yqzcBmyK-mo/TQ_9Y0GoLnI/AAAAAAAABMM/hbFiZeCEP5g/s200/flower.jpg" height="200" width="200" /></a></div>

Imej diatas tidak sama besar jadi dengan memasukkan width dan height jadi sama kedudukannya.Cara nya lebih kurang sama dengan apa yg saya terangkan pada artikel susun imej pada sidebar sebelum ini.

Catat Ulasan

Letakkan komen anda disini.Segala komen adalah dihargai.Sila buat backup bila membuat perubahan pada template.Terima Kasih.

34 Comments:

Scarlett O'Hara berkata...
terima kasih atas kunjungan

Akan saya cuba.Terima kasih kerana sudi berkongs1.

Aimi Razman berkata...
terima kasih atas kunjungan

tuto yg sangat bagus ! thanks yahaya.

Afina berkata...
terima kasih atas kunjungan

share boleh?

Cikgu Fikri berkata...
terima kasih atas kunjungan

wah..
bguslah entry ni..
memudahkan keje nak upload gmbr..
thx :)

Belalang Hijau berkata...
terima kasih atas kunjungan

sangat berguna tutorial ini :)

n.hasleena berkata...
terima kasih atas kunjungan

Salam...
Info yang amat berguna menerusi blog saudara ini. Terima kasih...

azie berkata...
terima kasih atas kunjungan

bagus2 tips yg menarik

honeyvsbee berkata...
terima kasih atas kunjungan

ohh nanti try buat thanksssss yahya

Mekar berkata...
terima kasih atas kunjungan

Salam Saudara. Terima kasih byk2 ya. Dah lama benor saya mencari tutorial "cara nak susun gambar" ni. Baru hari ni jumpa. Seronok sangat ni :-) . Saya link blog sdra kat blog saya ya. Singgah la jika ada kelapangan.

http://www.whitepearl1400.blogspot.com

nUmara... berkata...
terima kasih atas kunjungan

thanks 4 d info.. pnah geram ng mende ni! hehe..

yahaya berkata...
terima kasih atas kunjungan

@Mekarterima kasih juga..singgah ..komen yg diberikan...

yahaya berkata...
terima kasih atas kunjungan

@nUmara...sama la.saya dulu pun ...hehhe

lyna berkata...
terima kasih atas kunjungan

saudara yahya, tlg bantu saya mengenai header pada blog sye yg melorot ke bawah sgt puas dh sye cuba :(

yahaya berkata...
terima kasih atas kunjungan

@lyna
cuba ubah pada template nilai padding pada kod ini:

.header-inner .Header .titlewrapper {
padding: 22px 30px;
}display:none;
.header-inner .Header .descriptionwrapper {
padding: 0 30px;
}
ada dua baris tulisan saya tak pasti sebab apa ada kat tengah tengah tu..kalau boleh delete lagi baik...

Cempakamelati berkata...
terima kasih atas kunjungan

Saya selalu ada masalah susun gambar ni..entry yang bagus..terima kasih.

yahaya berkata...
terima kasih atas kunjungan

@Cempakamelati
saya mula2 dulu pun sama juga....

||aLeaSaRa|| berkata...
terima kasih atas kunjungan

mcm mana ye..tutorial ni ada perkataan terlindung bwh foto dan ada tulisan double.ingat nak buat hari ni geram tiap kali edit foto kat entri.tlg ye betulkan kite nk sgt guna tutorial ni tq!

wafimamap3 berkata...
terima kasih atas kunjungan

salam yahaya, utk menyusun gambar di post, adakah saya perlu buat post terlebih dahulu. baru masukkan kod yang yahaya berikan. Satu lagi nak tanyalah kod warna hijau yang mana nak ditukar. Kod didalam kotak ke atau kod dibawah sekali.

yahaya berkata...
terima kasih atas kunjungan

@wafimamap3kalau nak masuk gambar sebelah menyebelah baru letak kod hijau dalam mode edit html.letak celah dua kod gambar macam kat atas.

Pirate berkata...
terima kasih atas kunjungan

thx Yahaya! ini yg saya cari.

nantaPD berkata...
terima kasih atas kunjungan

Ini yang saya cari makasih sobat....

Tanpa Nama berkata...
terima kasih atas kunjungan

salam en. rasa sy org yg ade basic html bole lh follow cara penerangan en...but org mcm sy yg langsung xde basic ni masih terkapai-kapailh nk memahamkn cara penerangan en...sorylh klu bhase agak kasar but sy memang mengharapkn org mcm en. utk bljr but smtimes stress coz always error on trying ur step...hope u can share ur knowledge in more detail for ur all entries...hope sesangat..yg entries ni pun sy xpham...hijau yg mne nk amik? n nk letak kt line mne plak...aduh mungkin sy ni lembab kot...sory k...tq 4 ur xplanation...salam

yahaya berkata...
terima kasih atas kunjungan

@Anonymous
boleh gunakan hubungi saya secara email..dan paste kan kod yg dimasukkan pada edit html...saya akan betulkan..ada masaalah boleh tanya...saya cuba seboleh bolehnya supaya senang difahami..semasa membuat tutorial.

Tanpa Nama berkata...
terima kasih atas kunjungan

macam mana kalau gmbar tu kita nak letak caption. masih boleh susun mcm tu ke x?/

yahaya berkata...
terima kasih atas kunjungan

@Tanpa Nama
boleh letak caption.terima kasih kerana bertanya.Saya dan letak caption pada gambar seperti diatas..:)

Sofea.J berkata...
terima kasih atas kunjungan

kenapa gambar jadi kecil.selepas buat new post.adakah kesan selepas pasang auto read more. saya mahu gambar besar apabila publish post..tolong ajar

yahaya berkata...
terima kasih atas kunjungan

@Sofea.Jimej tu masa belum klik read more saja..ada thumbnail..bila klik read more jadi besar... read more cuma untuk ringkasan posting saja....

Qyla berkata...
terima kasih atas kunjungan

puas sy cari tutorial ni . hehehe . thanks :)

Patrick Star berkata...
terima kasih atas kunjungan

nk letak caption bwh gambar tu mcm mana plak ye?

yahaya berkata...
terima kasih atas kunjungan

@Patrick Starsemasa masuk gambar pada posting kita ada pilihan menetapkan saiz dan sebagainya...disitu ada add caption cuma perlu klik...dan letak nama

mahazan omar berkata...
terima kasih atas kunjungan

serius dowh, blog ni mmg best. tlisan ckit, sng nk pham... tq

yahaya berkata...
terima kasih atas kunjungan

@mahazan omarterima kasih En Mahazan

Sukma Haron berkata...
terima kasih atas kunjungan

satu teknik yang menarik menjimatkan ruang...
saya akan cuba letak pada blog saya ceritamayapersada@blogspot.com

Fizz Shoppe berkata...
terima kasih atas kunjungan

sangat2 membantu!

Related Posts Plugin for WordPress, Blogger...