CARA MEMBUAT POSTINGAN GAMBAR YANG BERJAJAR DAN RAPI

Ketika pertama kali belajar menulis artikel di blog, ada kesulitan saat hendak mengatur atau menata banyak gambar atau foto, maklum saat itu jenis artikel yang hendak di posting berjudul;CARA MEMBUAT POSTINGAN GAMBAR YANG BERJAJAR DAN RAPI

Problemnya adalah: gambar-gambar itu susah diatur; fasilitas yang ada seperti size (small, medium. large, original) dan Posisi (left, center, right) tidaklah membantu banyak, bahkan terkadang di klik kanan larinya ke kiri, di geser ke atas malah anjlok ke bawah. Bagaimana ini ?

Sebaik apapun artikel atau posting, apabila tampilannya tidak ditata dengan baik tentu akan membuat pengunjung malas untuk berlama-lama menikmati suguhan posting yang sudah dibuat dengan begitu serius dan bahkan menghabiskan banyak waktu dan tenaga. Banyak blogger yang masih dalam tahap awal terjun di dunia blog mengalami kesulitan untuk melakukan penataan sekaligus merubah ukuran gambar yang akan ditampilkan. Kenyataan seperti ini tidak dapat dipungkiri karena pemahaman tentang kode HTMl tidak bisa dilakukan tanpa tuntunan dari blogger yang sudah cukup matang di dunia blog, terutama yang mendalami tentang desain sebuah blog. Bagaimana supaya dapat secara cepat mengatasi permasalahan tampilan gambar di postingan? Bukan sesuatu yang sulit karena kode html yang digunakan sekedar untuk sedikit mempengaruhi penataan dan penampilan gambar tidaklah banyak dan rumit. Hanya beberapa kode sederhana kita tambahkan pada file gambar, maka jadilah sebuah tampilan posting yang sedap dipandang sekaligus enak untuk dinikmati.

Alhamdulillah problem tersebut sekarang sudah bisa diatasi, sudah ketemu skrip yang dapat menata gambar dan foto sekehendak yang kita mau.

Tapi sebelum saya bagi tipsnya, akan saya ajak pembaca memahami apa yang saya maksudkan, dengan membuat pembanding gambar sebelum dan sesudah memakai skrip tokcer ini.

Seperti yang nampak pada gambar diatas adalah kodenya sebagai beriut;

<div dir="ltr" style="text-align: left;" trbidi="on">
<center>
<table border="0">
<tbody>
<tr>
<td><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim6hoZmW5IfRkjgJDMIi9KGBVK0R0C3jfI_GyobnvGbjHwMgktjlrQcQs-Ff8kLSE8msKlV2SKa8TDGoeVIC44aCN0PYdeYO6t_UCfybYRHqnPdVOIJMqgnCv5hJnuFpSwVWm7T3m-m2t-/s1600/kastanye1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim6hoZmW5IfRkjgJDMIi9KGBVK0R0C3jfI_GyobnvGbjHwMgktjlrQcQs-Ff8kLSE8msKlV2SKa8TDGoeVIC44aCN0PYdeYO6t_UCfybYRHqnPdVOIJMqgnCv5hJnuFpSwVWm7T3m-m2t-/s200/kastanye1.PNG" width="200" /></a></div>
<br /></td>
<td><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid52-6OmBY-8JHd2rpLb6aseM2yoGb1bhHU4eVx7XkqYwGQ6Cw8aE8cJiRZp5xAM0QjA6q8P_3mzlA7WuNdBvte_ivgKeieR9WHWDteCYM0Y40MDEF1Faf-Wil1-Izy1n8EOXM8DxQEVGc/s1600/danggui1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid52-6OmBY-8JHd2rpLb6aseM2yoGb1bhHU4eVx7XkqYwGQ6Cw8aE8cJiRZp5xAM0QjA6q8P_3mzlA7WuNdBvte_ivgKeieR9WHWDteCYM0Y40MDEF1Faf-Wil1-Izy1n8EOXM8DxQEVGc/s200/danggui1.PNG" width="200" /></a></div>
<br /></td>
</tr>
<tr>
<td>Kastanye</td>
<td>Dang gui</td>
</tr>
</tbody></table>
<table border="0">
<tbody>
<tr>
<td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPx3aeU-HwiEh3f8MQMHPdIdHrSy8cBrdLV44ALTdB1w-y6-tGdQcwYu6AmrkZIPWZ7fPjwP-DUOwrttES31GHjM_mzuj-rQWYfEtErjtUhnGnmP9v1LCCirHSD0bANeVXBjPo3jplvjxR/s1600/broto1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPx3aeU-HwiEh3f8MQMHPdIdHrSy8cBrdLV44ALTdB1w-y6-tGdQcwYu6AmrkZIPWZ7fPjwP-DUOwrttES31GHjM_mzuj-rQWYfEtErjtUhnGnmP9v1LCCirHSD0bANeVXBjPo3jplvjxR/s200/broto1.PNG" width="200" /></a></div>
<br /></td><td><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh-jcHPnh5sUyYimIy1iTlDPznpMlQWxCXc1ROwMTIwNtqIKEcNGKLBkSOLvm6na9b8pzrtujjTy7P1o6EOjVpJbH2SFznkihDjnw59pK5eRcWMEwDBplkzzw_FoqIfdobEZnqdDdQvCOl/s1600/pegagan1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="145" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh-jcHPnh5sUyYimIy1iTlDPznpMlQWxCXc1ROwMTIwNtqIKEcNGKLBkSOLvm6na9b8pzrtujjTy7P1o6EOjVpJbH2SFznkihDjnw59pK5eRcWMEwDBplkzzw_FoqIfdobEZnqdDdQvCOl/s200/pegagan1.PNG" width="200" /></a></div>
<br /></td>
</tr>
<tr>
<td>Brotowali</td>
<td>Pegagan</td>
</tr>
</tbody></table>
</center>
</div>

Keterangan= untuk warna merah silahkan ganti dengan link gambar anda, sedang warna biru adalah nama nama gambar tersebut,, LALU bagaimana cara mendapatkan link gambar? sepperti biasa pada waktu anda mau posting artikel atau gambar , seteah gambar diupload silahkan klik menu HTML nya maka disitu akan ada dua url gambar, silahkan dicoba coba url yang yan tepat pada posisi href dan src
Demikianlah cara membuat postingan gambar jadi lebih tertata rapi, terimakasi atas kunjungannya semoga bermanfaat.