May 30, 2010

Gambar Di Sebelah Perenggan Dalam Pos

Panduan bagaimana cara meletak gambar di sebelah kanan atau di sebelah kiri perenggan dalam pos blog.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lihat contoh di bawah. Warna merah adalah kod untuk gambar dengan kod pautannya. Samada gambar dimuatnaik menggunakan Insert Image atau dimuatnaik dari lain hos luaran, asas kodnya adalah sama. Semasa membuat pos baru atau menyunting pos lama gunakan pilihan mode Edit HTML (bawah pilihan Compose gambar sebenar akan dipaparkan).

Tambah kod warna biru sebelum dan selepas kod gambar untuk meletak gambar disebelah kanan perenggan.

float: right;letak gambar di sebelah kanan perenggan
padding-left: 10px;jarak di antara perenggan dengan gambar
padding-right: 10px;jarak di antara gambar dengan dinding sebelah kanan
Sambung taip perenggan berkenaan selepas kod gambar.

<div style="float: right; padding-left: 10px; padding-right: 10px;">
<a href="http://picasaweb.google.com/lh/photo/vieiXq8PuRreWFe6O_Uiwa1egs1tn6nPiKKVyNN5TNI?feat=embedwebsite">
<img src="http://lh5.ggpht.com/_AkrTrvrxAwY/S7q8XmowP3I/AAAAAAAAANI/LpX1X9zq2hY/s144/Anak-Kucing-Sedih.jpg" /></a>
</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

float: left;letak gambar di sebelah kiri perenggan
padding-left: 10px;jarak di antara dinding kiri dengan gambar
padding-right: 10px;jarak di antara gambar dengan perenggan
Sambung taip perenggan berkenaan selepas kod gambar

<div style="float: left; padding-left: 10px; padding-right: 10px;">
<a href="http://picasaweb.google.com/lh/photo/vieiXq8PuRreWFe6O_Uiwa1egs1tn6nPiKKVyNN5TNI?feat=embedwebsite"><img src="http://lh5.ggpht.com/_AkrTrvrxAwY/S7q8XmowP3I/AAAAAAAAANI/LpX1X9zq2hY/s144/Anak-Kucing-Sedih.jpg" /></a></div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

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

Gambar di kiri dan di kanan perenggan:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Contoh kod bagi gambar di kiri dan di kanan perenggan:


<div style="float: left; padding-left: 10px; padding-right: 10px;">
<a href="http://picasaweb.google.com/lh/photo/vieiXq8PuRreWFe6O_Uiwa1egs1tn6nPiKKVyNN5TNI?feat=embedwebsite"><img src="http://lh5.ggpht.com/_AkrTrvrxAwY/S7q8XmowP3I/AAAAAAAAANI/LpX1X9zq2hY/s144/Anak-Kucing-Sedih.jpg" /></a></div>


<div style="float: right; padding-left: 10px; padding-right: 10px;">
<a href="http://picasaweb.google.com/lh/photo/vieiXq8PuRreWFe6O_Uiwa1egs1tn6nPiKKVyNN5TNI?feat=embedwebsite"><img src="http://lh5.ggpht.com/_AkrTrvrxAwY/S7q8XmowP3I/AAAAAAAAANI/LpX1X9zq2hY/s144/Anak-Kucing-Sedih.jpg" /></a></div>


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

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

Dua gambar di kiri perenggan:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Contoh kod dua gambar di kiri perenggan:


<div style="float: left; padding-left: 10px; padding-right: 10px;">
<a href="http://picasaweb.google.com/lh/photo/vieiXq8PuRreWFe6O_Uiwa1egs1tn6nPiKKVyNN5TNI?feat=embedwebsite"><img src="http://lh5.ggpht.com/_AkrTrvrxAwY/S7q8XmowP3I/AAAAAAAAANI/LpX1X9zq2hY/s144/Anak-Kucing-Sedih.jpg" /></a></div>


<div style="float: left; padding-left: 0px; padding-right: 10px;">
<a href="http://picasaweb.google.com/lh/photo/vieiXq8PuRreWFe6O_Uiwa1egs1tn6nPiKKVyNN5TNI?feat=embedwebsite"><img src="http://lh5.ggpht.com/_AkrTrvrxAwY/S7q8XmowP3I/AAAAAAAAANI/LpX1X9zq2hY/s144/Anak-Kucing-Sedih.jpg" /></a></div>


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

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

Dua gambar di kanan perenggan:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Contoh kod bagi dua gambar di kanan perenggan;


<div style="float: right; padding-left: 10px; padding-right: 10px;">
<a href="http://picasaweb.google.com/lh/photo/vieiXq8PuRreWFe6O_Uiwa1egs1tn6nPiKKVyNN5TNI?feat=embedwebsite"><img src="http://lh5.ggpht.com/_AkrTrvrxAwY/S7q8XmowP3I/AAAAAAAAANI/LpX1X9zq2hY/s144/Anak-Kucing-Sedih.jpg" /></a></div>


<div style="float: right; padding-left: 0px; padding-right: 10px;">
<a href="http://picasaweb.google.com/lh/photo/vieiXq8PuRreWFe6O_Uiwa1egs1tn6nPiKKVyNN5TNI?feat=embedwebsite"><img src="http://lh5.ggpht.com/_AkrTrvrxAwY/S7q8XmowP3I/AAAAAAAAANI/LpX1X9zq2hY/s144/Anak-Kucing-Sedih.jpg" /></a></div>


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

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


Sekian, selamat mencuba dan selamat berjaya.

Sebarang pautan balik dari blog anda adalah sangat-sangat dihargai. URL http://calipso-tutorialblogger.blogspot.com/.

Salam hormat dari

3 comments:

Ibnu Tukiman said... [Balas komen ini]

tak ada cara lebih mudah ke?

AQILLIYA said... [Balas komen ini]
This comment has been removed by the author.
Anonymous said... [Balas komen ini]

Hello, Neat post. There is an issue together with your
web site in internet explorer, may test this? IE still is the
market chief and a good portion of people will miss your wonderful writing
because of this problem.
http://bit.ly/13jRpqN youtube comments

Post a Comment