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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN_w4NpfrK4Fgpki_SF-apFzn6_VGcmeQdpJZGIsHS6xbggNH6ZerbZEegCrZe82DcGc3F_tOITaB4kW-F-KxI25K1W0TytIGKDL66ikTWf5fnb03D7cFPSplTGCpEI9OR8_6XVr9Yq4o/s1600/images.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN_w4NpfrK4Fgpki_SF-apFzn6_VGcmeQdpJZGIsHS6xbggNH6ZerbZEegCrZe82DcGc3F_tOITaB4kW-F-KxI25K1W0TytIGKDL66ikTWf5fnb03D7cFPSplTGCpEI9OR8_6XVr9Yq4o/s1600/images.jpeg" /></a></div>
</div>
<div style="float: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKx3Xz_7yShUCr24b9v2Vmc_th6WiXYx4uQQCsXPT1vaJNFOeD7L2MN19cf5SxelBGdnHHHPQLzXDqx9eQTsHvki841vGXyH0XzPZVe0XV4dfcxeUwlW5DSBtOKOt3eDcqfXU35SrqiJQ/s1600/imagesd.jpeg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKx3Xz_7yShUCr24b9v2Vmc_th6WiXYx4uQQCsXPT1vaJNFOeD7L2MN19cf5SxelBGdnHHHPQLzXDqx9eQTsHvki841vGXyH0XzPZVe0XV4dfcxeUwlW5DSBtOKOt3eDcqfXU35SrqiJQ/s1600/imagesd.jpeg" /></a></div>
</div>
<div style="float: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbJNWSqbrlnbcqYr2r4kKpNUDeyWPL9tH7jp4JuvPt_qcsNbtcgxT8IBRQ9EheUmMJ_lfmFtHK2ShvuYa_tqHpYG9XyWAnA5iWf79KRDg5mNZV-sgicHrqOUTRnkHb3KWd1NtkV0Fbk5s/s1600/flower.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbJNWSqbrlnbcqYr2r4kKpNUDeyWPL9tH7jp4JuvPt_qcsNbtcgxT8IBRQ9EheUmMJ_lfmFtHK2ShvuYa_tqHpYG9XyWAnA5iWf79KRDg5mNZV-sgicHrqOUTRnkHb3KWd1NtkV0Fbk5s/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbJNWSqbrlnbcqYr2r4kKpNUDeyWPL9tH7jp4JuvPt_qcsNbtcgxT8IBRQ9EheUmMJ_lfmFtHK2ShvuYa_tqHpYG9XyWAnA5iWf79KRDg5mNZV-sgicHrqOUTRnkHb3KWd1NtkV0Fbk5s/s1600/flower.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbJNWSqbrlnbcqYr2r4kKpNUDeyWPL9tH7jp4JuvPt_qcsNbtcgxT8IBRQ9EheUmMJ_lfmFtHK2ShvuYa_tqHpYG9XyWAnA5iWf79KRDg5mNZV-sgicHrqOUTRnkHb3KWd1NtkV0Fbk5s/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.

Post a Comment

34 Comments:

Uji Hussein said...
Teknik Buat Blog

Akan saya cuba.Terima kasih kerana sudi berkongs1.

Anonymous said...
Teknik Buat Blog

tuto yg sangat bagus ! thanks yahaya.

kotak kosong said...
Teknik Buat Blog

share boleh?

Unknown said...
Teknik Buat Blog

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

Belalang hijau Perisik said...
Teknik Buat Blog

sangat berguna tutorial ini :)

n.hasleena said...
Teknik Buat Blog

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

azie said...
Teknik Buat Blog

bagus2 tips yg menarik

Bee said...
Teknik Buat Blog

ohh nanti try buat thanksssss yahya

MyMekar.com said...
Teknik Buat Blog

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... said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

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

lyna said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

@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 said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

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

||aLeaSaRa|| said...
Teknik Buat Blog

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!

wafimamakidz said...
Teknik Buat Blog

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.

sibersensasi said...
Teknik Buat Blog

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

Unknown said...
Teknik Buat Blog

thx Yahaya! ini yg saya cari.

nantaPD said...
Teknik Buat Blog

Ini yang saya cari makasih sobat....

Anonymous said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

@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.

Anonymous said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

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

Sofea.J said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

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

Unknown said...
Teknik Buat Blog

puas sy cari tutorial ni . hehehe . thanks :)

S.A.M said...
Teknik Buat Blog

nk letak caption bwh gambar tu mcm mana plak ye?

sibersensasi said...
Teknik Buat Blog

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

Unknown said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

@mahazan omarterima kasih En Mahazan

Sukma said...
Teknik Buat Blog

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

Noorhafiza said...
Teknik Buat Blog

sangat2 membantu!