Mar 14, 2011

Cara Besarkan Gambar Dalam Pos

Gambar yang kita muatnaik dalam pos menggunakan fungsi Insert image blogger semuanya disimpan dalam Google Picasa Web Album. Bagaimana cara hos gambar di Picasa boleh ikut panduan Hos Gambar Di Google Picasa Web Album.

Bagi newbie cara muat naik gambar dalam pos ikut panduan Cara Masukkan Gambar Dalam Pos.


Gambar atas berukuran 150x112 dimuat naik dalam pos menggunakan Insert image blogger bawah Mode Edit HTML:


Kod gambar adalah seperti berikut:

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJPyL-opTx_83Y6ZrkpicrP3CT-_rbpR1T21TrAABLi7286jIiPNHNIjvg42W1K822hP_HNR9sFFAgjWQeb3TuN7SGQ-JOhjWebHOWVEjyWPOkTbpRjh7wpuNUIbw1mlsJSPWbsuI6Afn/s1600/afghandashtelaili.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="112" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJPyL-opTx_83Y6ZrkpicrP3CT-_rbpR1T21TrAABLi7286jIiPNHNIjvg42W1K822hP_HNR9sFFAgjWQeb3TuN7SGQ-JOhjWebHOWVEjyWPOkTbpRjh7wpuNUIbw1mlsJSPWbsuI6Afn/s150/afghandashtelaili.jpg" width="150" /></a></div>

Perhatikan tag warna biru dalam kod gambar di atas. Dimensi gambar berukuran height="112" lebar gambar width="150" (tinggi="112" dan lebar="150"). Tag s150 adalah sama dengan width gambar. Nisbah tinggi gambar adalah lebih kurang 74 peratus daripada lebar gambar.

Untuk besarkan gambar nisbah gambar mesti dikekalkan. Katalah kita akan besarkan lebar gambar menjadi "500". Jadi height gambar 74 peratus daripada "500" lebih kurang "373". Ukuran gambar akan menjadi height="373" dan width="500". Pinda s150 menjadi s500 seperti berikut:

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJPyL-opTx_83Y6ZrkpicrP3CT-_rbpR1T21TrAABLi7286jIiPNHNIjvg42W1K822hP_HNR9sFFAgjWQeb3TuN7SGQ-JOhjWebHOWVEjyWPOkTbpRjh7wpuNUIbw1mlsJSPWbsuI6Afn/s1600/afghandashtelaili.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="373" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJPyL-opTx_83Y6ZrkpicrP3CT-_rbpR1T21TrAABLi7286jIiPNHNIjvg42W1K822hP_HNR9sFFAgjWQeb3TuN7SGQ-JOhjWebHOWVEjyWPOkTbpRjh7wpuNUIbw1mlsJSPWbsuI6Afn/s500/afghandashtelaili.jpg" width="500" /></a></div>

contoh gambar:


Begitu juga jika ingin mengecilkan gambar. Kekalkan nisbah tinggi dengan lebar gambar.


Gambar bawah berukuran 150x85 dimuat naik dalam pos menggunakan Insert image blogger bawah Mode Compose:



Kod gambar seperti berikut:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgExXcGcIYylUoZySE5PKXMc6dHkMjCznINakD8f9BO46AWs-2zMUVZO6uU9u0EghhC8a8wufbJkQitmFhAiCd4EYLUH0FmBLHh5iPg6dhlc2dXyxEclgjz4lyUNp4C61pIWffMba8yKO7N/s1600/Blogger+Large+Image.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="85" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgExXcGcIYylUoZySE5PKXMc6dHkMjCznINakD8f9BO46AWs-2zMUVZO6uU9u0EghhC8a8wufbJkQitmFhAiCd4EYLUH0FmBLHh5iPg6dhlc2dXyxEclgjz4lyUNp4C61pIWffMba8yKO7N/s150/Blogger+Large+Image.jpg" width="150" /></a></div>


Perhatikan tag warna biru dalam kod gambar di atas. Dimensi gambar berukuran height="85" lebar gambar width="150" (tinggi="85" dan lebar="150"). Tag s150 adalah sama dengan width gambar. Nisbah tinggi gambar adalah lebih kurang 57 peratus daripada lebar gambar.

Untuk besarkan gambar nisbah gambar mesti dikekalkan. Katalah kita akan besarkan lebar gambar menjadi "500". Jadi height gambar 57 peratus daripada "500" lebih kurang "285". Ukuran gambar akan menjadi height="285" dan width="500". Pinda s150 menjadi s500 seperti berikut:

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJPyL-opTx_83Y6ZrkpicrP3CT-_rbpR1T21TrAABLi7286jIiPNHNIjvg42W1K822hP_HNR9sFFAgjWQeb3TuN7SGQ-JOhjWebHOWVEjyWPOkTbpRjh7wpuNUIbw1mlsJSPWbsuI6Afn/s1600/afghandashtelaili.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="285" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMJPyL-opTx_83Y6ZrkpicrP3CT-_rbpR1T21TrAABLi7286jIiPNHNIjvg42W1K822hP_HNR9sFFAgjWQeb3TuN7SGQ-JOhjWebHOWVEjyWPOkTbpRjh7wpuNUIbw1mlsJSPWbsuI6Afn/s500/afghandashtelaili.jpg" width="500" /></a></div>

Contoh gambar:

5 comments:

ayza said... [Balas komen ini]

thankssss..

Aishah Megahasz said... [Balas komen ini]

Thank you so much. Senang faham dan dah cuba buat.

Rohani said... [Balas komen ini]

macamane nak buat bingkai pada gambar kat dlm blog

Calipso said... [Balas komen ini]

@Rohani Rohani tambah nilai code border dalam code img<> tu. Contoh:

<img border="0" height="85" src="https://lh4.googleusercontent.com/-Xf6sO8naI_A/TXzrS8cI-NI/AAAAAAAACUA/aZti5PQNpUo/s150/Blogger+Large+Image.jpg" width="150" />

border="0" tu jadikan border="1" - kalau nak garisan tebal lagi jadikan "2", "3" atau "4" seterusnya.

Jefry said... [Balas komen ini]

terima kasih, ternyata mudha mensettingnya

Post a Comment