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:
Kebiasaanya akan jadi seperti ini tersusun menjadi tiga baris.
untuk mengubahnya kita perlu masuk ke mode edit HTML
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>
<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:
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:
Akan saya cuba.Terima kasih kerana sudi berkongs1.
tuto yg sangat bagus ! thanks yahaya.
share boleh?
wah..
bguslah entry ni..
memudahkan keje nak upload gmbr..
thx :)
sangat berguna tutorial ini :)
Salam...
Info yang amat berguna menerusi blog saudara ini. Terima kasih...
bagus2 tips yg menarik
ohh nanti try buat thanksssss yahya
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
thanks 4 d info.. pnah geram ng mende ni! hehe..
@Mekarterima kasih juga..singgah ..komen yg diberikan...
@nUmara...sama la.saya dulu pun ...hehhe
saudara yahya, tlg bantu saya mengenai header pada blog sye yg melorot ke bawah sgt puas dh sye cuba :(
@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...
Saya selalu ada masalah susun gambar ni..entry yang bagus..terima kasih.
@Cempakamelati
saya mula2 dulu pun sama juga....
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!
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.
@wafimamap3kalau nak masuk gambar sebelah menyebelah baru letak kod hijau dalam mode edit html.letak celah dua kod gambar macam kat atas.
thx Yahaya! ini yg saya cari.
Ini yang saya cari makasih sobat....
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
@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.
macam mana kalau gmbar tu kita nak letak caption. masih boleh susun mcm tu ke x?/
@Tanpa Nama
boleh letak caption.terima kasih kerana bertanya.Saya dan letak caption pada gambar seperti diatas..:)
kenapa gambar jadi kecil.selepas buat new post.adakah kesan selepas pasang auto read more. saya mahu gambar besar apabila publish post..tolong ajar
@Sofea.Jimej tu masa belum klik read more saja..ada thumbnail..bila klik read more jadi besar... read more cuma untuk ringkasan posting saja....
puas sy cari tutorial ni . hehehe . thanks :)
nk letak caption bwh gambar tu mcm mana plak ye?
@Patrick Starsemasa masuk gambar pada posting kita ada pilihan menetapkan saiz dan sebagainya...disitu ada add caption cuma perlu klik...dan letak nama
serius dowh, blog ni mmg best. tlisan ckit, sng nk pham... tq
@mahazan omarterima kasih En Mahazan
satu teknik yang menarik menjimatkan ruang...
saya akan cuba letak pada blog saya ceritamayapersada@blogspot.com
sangat2 membantu!