Quantcast

Susun Gambar Sebelah Menyebelah

classic Classic list List threaded Threaded
17 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Susun Gambar Sebelah Menyebelah

Calipso
Administrator
Cara susun dua gambar sebelah menyebelah dalam pos.  





2 contoh gambar atas dihoskan dalam Picasa Web Album (rujuk panduan dalam blog tutorial bawah tajuk Hos Gambar Dalam Picasa Web Album").  Contoh kod pautan gambar dari picasa:

<a href="http://picasaweb.google.com/lh/photo/spd8TP45pTWw8zjS23Gmbu6YyhZCDAddtQxI6lh44DY?feat=embedwebsite"><img src="http://lh4.ggpht.com/_AfsBAt3Dt8g/TLkfaHveijI/AAAAAAAAAGw/ycv77XFb_6U/s288/Islam8.jpg" height="210" width="288" /></a>

<a href="http://picasaweb.google.com/lh/photo/rstUaHNC-OMPPbxZFz95eO6YyhZCDAddtQxI6lh44DY?feat=embedwebsite"><img src="http://lh4.ggpht.com/_AfsBAt3Dt8g/TLkfaKIaOCI/AAAAAAAAAG0/6-l5pDYFG_M/s288/Hijab_Ladies.jpg" height="120" width="207" /></a>


Untuk susun gambar sebelah menyebelah dalam pos blog (mesti pilih mode Edit HTML) tambah kod warna merah sebelum dan selepas gambar:

<div style="float: left;"><a href="http://picasaweb.google.com/lh/photo/spd8TP45pTWw8zjS23Gmbu6YyhZCDAddtQxI6lh44DY?feat=embedwebsite"><img src="http://lh4.ggpht.com/_AfsBAt3Dt8g/TLkfaHveijI/AAAAAAAAAGw/ycv77XFb_6U/s288/Islam8.jpg" height="150" width="207" /></a></div>

<div style="float: left;"><a href="http://picasaweb.google.com/lh/photo/rstUaHNC-OMPPbxZFz95eO6YyhZCDAddtQxI6lh44DY?feat=embedwebsite"><img src="http://lh4.ggpht.com/_AfsBAt3Dt8g/TLkfaKIaOCI/AAAAAAAAAG0/6-l5pDYFG_M/s288/Hijab_Ladies.jpg" height="120" width="207" /></a></div>


   

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Susun Gambar Sebelah Menyebelah

mangochic♥
hye..cmne eh nak ssun gmbar ni..
dh try tp xjadi pun..gmbar upload dari computer xleh susun sbelah ke?
mmg kene upload from picasa dlu ke?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Susun Gambar Sebelah Menyebelah

Calipso
Administrator
kalau gambar yang awak upload dalam pos blog dari komputer sendiri memang blogger simpan gambar tu dalam picasa web album jugak.  Kalau awak log masuk dalam picasa guna ID dan password blogger yang sama awak akan tengok semua gambar tu ada dalam picasa sana.  

Yang saya bagi contoh kat atas tu saya upload dalam picasa dulu gambar dia, kemudian dari dalam picasa baru saya ambik kod dia.

edit balik pos tu bawah mode Edit HTML awak boleh copy code gambar tu, lebih kurang sama macam contoh kod kat atas, kemudian paste kat sini kod gambar tu nanti saya tunjukkan contoh kod tambahan dia.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Susun Gambar Sebelah Menyebelah

mangochic
bro,ni code pictures yg saye nk susun tu..saye copy dr edit html blog..
tolong ajar ek..(^_^)



</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<br />
<br /></div>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Susun Gambar Sebelah Menyebelah

mangochic
In reply to this post by Calipso
pelik la nape kuar gmbar bile saye paste code html 2?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Susun Gambar Sebelah Menyebelah

Calipso
Administrator
ambik yang code gambar sahaja (2 gambar untuk susun) paste dalam ni,  kalau ada link dia nanti saya boleh dapatkan sendiri tak ada masalah.  Gambar kat atas tak dapat pegi pada link dia...
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Susun Gambar Sebelah Menyebelah

Calipso
Administrator
<div style="float: left; padding-left: 35px;"><img border="0" height="160" src="http://3.bp.blogspot.com/_SDmr9sDDjUc/TOx0T-a9dwI/AAAAAAAAAa0/YzwwhDVPo8A/s1600/171120102288.jpg" width="120" margin-right: 3px;/></div>

<div style="float: left;"><img border="0" height="160" src="http://3.bp.blogspot.com/_SDmr9sDDjUc/TOx0T-a9dwI/AAAAAAAAAa0/YzwwhDVPo8A/s1600/171120102288.jpg" width="120" margin-right: 3px/></div>

<div style="float: left;"><img border="0" height="160" src="http://3.bp.blogspot.com/_SDmr9sDDjUc/TOx0T-a9dwI/AAAAAAAAAa0/YzwwhDVPo8A/s1600/171120102288.jpg" width="120" margin-right: 3px;/></div>


                                




Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Susun Gambar Sebelah Menyebelah

Calipso
Administrator
   

awak cuba copy kod bawah ni cuba gantikan tengok ok ke tak, dalam forum ni text kat bawah gambar tu tak boleh keluar:

<div style="float: left;"><a href="http://i1189.photobucket.com/albums/z436/muhaajir/tone%20siries/type%20c/C21-AFFABLECORAL-M-RM55.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="http://i1189.photobucket.com/albums/z436/muhaajir/tone%20siries/type%20c/C21-AFFABLECORAL-M-RM55.jpg" width="150" /></a><br /><br />
<div style="font-size: small; line-height: 11px; padding-left: 5px;">kod :<br />
warna :<br />
saiz :<br />
harga :
</div></div>

<div style="float: left;"><a href="http://i1189.photobucket.com/albums/z436/muhaajir/tone%20siries/type%20c/C09SILVERLINING-L-RM55.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="http://i1189.photobucket.com/albums/z436/muhaajir/tone%20siries/type%20c/C09SILVERLINING-L-RM55.jpg" width="150" /></a><br /><br />
<div style="font-size: small; line-height: 11px; padding-left: 5px;">kod :<br />
warna :<br />
saiz :<br />
harga :
</div></div>


<div style='clear: both;'></div>

kalau tak ada apa-apa yang sulit dan peribadi dalam dashboard blogger email pada saya ID dengan password awak boleh saya bantu betulkan... pastikan password blogger dengan password email tak sama... nanti jatuh ketangan orang yang tak bertanggung jawab bahaya jugak...
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Susun Gambar Sebelah Menyebelah

nickname
salam calipso...

sy dah copy kod tu tapi jadi tinggi rendah jugak,cuma beza sikit dari post saya sebelum ni..boleh tengok kat blog saya..

sy cuba besarkan body post takut kecik sangat tak jadi jugak,cuba kecikkan lagi saiz gambar pun tak jadi jugak..

pasal pasword tu segan lah,sebab perkataan dalam pasword tu terlalu personal lah..he he,
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Susun Gambar Sebelah Menyebelah

Calipso
Administrator
ok no problem, nanti saya test dalam pos blog dulu di mana silapnya...
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Susun Gambar Sebelah Menyebelah

Calipso
Administrator
In reply to this post by nickname
ok muhaajir dah jumpa di mana silapnya.  Dalam pos blog tu awak kena sambungkan div kedua-dua gambar jangan asingkan dengan kedua-dua gambar dengan space satu baris kosong.  Tengok contoh dalam blog ni:

http://calipso-testblog.blogspot.com/2010/11/test-susun-gambar.html


SAMBUNGKAN DIV KEDUA-DUA GAMBAR:

<div style="float: left;"><a href="http://i1189.photobucket.com/albums/z436/muhaajir/tone%20siries/type%20c/C21-AFFABLECORAL-M-RM55.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="http://i1189.photobucket.com/albums/z436/muhaajir/tone%20siries/type%20c/C21-AFFABLECORAL-M-RM55.jpg" width="150" /></a><br /><br />
<div style="font-size: small; line-height: 11px; padding-left: 5px;">kod :<br />
warna :<br />
saiz :<br />
harga :
</div></div>
<div style="float: left;"><a href="http://i1189.photobucket.com/albums/z436/muhaajir/tone%20siries/type%20c/C09SILVERLINING-L-RM55.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="http://i1189.photobucket.com/albums/z436/muhaajir/tone%20siries/type%20c/C09SILVERLINING-L-RM55.jpg" width="150" /></a><br /><br />
<div style="font-size: small; line-height: 11px; padding-left: 5px;">kod :<br />
warna :<br />
saiz :<br />
harga :
</div></div>



<div style='clear: both;'></div>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Susun Gambar Sebelah Menyebelah

nickname

laa...tu ke punca dia,ok nanti sy cuba buat,,t.kasih calipso..nanti ada masalah sy tanya lagi..he he
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Susun Gambar Sebelah Menyebelah

aina75
In reply to this post by Calipso
saya jua ingin membuat nya tetapi x paham blh ke tlg saya ajar bagaimana caranya
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Susun Gambar Sebelah Menyebelah

nickname
Aina copy jer kod contoh tu,kemudian tukar dengan alamat url gambar aina,,cuba lah..


http://muhaajir2010.blogspot.com/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Susun Gambar Sebelah Menyebelah

aina75
In reply to this post by Calipso
ye ke tapi alamat url saya tu kat mana
x tahu
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Susun Gambar Sebelah Menyebelah

nickname


sy bukan pandai,,cuma nak kongsi hok mana tau jer..
alamat url tu,bila kita upload gambar kita kat photobucket atau mana2 kita akan dapat url tuh..mula dgn "http dan akhir dia jpg"..copy url tuh lah...

apa blog aina,,kalau boleh dikongsi...


http://muhaajir2010.blogspot.com/


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Susun Gambar Sebelah Menyebelah

Calipso
Administrator
In reply to this post by aina75
betul apa yang nickname ajar tu....

bila kita dah upload gambar dalam photobucket.  Dalam kita punya album tu dia listkan semua album atau gambar:



kemudan klik salah satu gambar yang berkenaan (contoh gambar tuan Sheikh Al Najib di atas).  Lepas tu photobucket akan buka gambar yang dipilih.  Dekat sebelah dia dalam kotak Share this photo ada alamat URL pautan:



contoh alamat URL pautan dari photobucket:

<a href="http://s143.photobucket.com/albums/r153/kupia/?action=view&current=17069_101515666546067_1000006290101.jpg" target="_blank"><img src="http://i143.photobucket.com/albums/r153/kupia/17069_101515666546067_1000006290101.jpg" border="0" alt="Photobucket"></a>
Loading...