Cara Singkat Membuat Postingan Galeri Foto pada Blogspot Blogger


Pernahkah Anda mengalami kesulitan menyelaraskan gambar secara horizontal pada posting di Blogger? Pernahkah Anda mencoba untuk menyelaraskan 2 atau lebih gambar?

Menggambungkan foto atau gambar di blogger supaya terlihat rapi dan beraturan, cara ini sangat mudah dan sederhana sekali karena hanya tinggal copy-paste code, maka akan terlihat contoh gambar apel seperti ini:


Pertama Unggah gambar yang Anda inginkan ke postingan blogger dan kemudian Anda klik tombol HTML dan didapat “URL” gambar yang anda unggah seperti tulisan orange berikut.

<div class=”separator” style=”clear: both; text-align: center;”>
<a href=”http://1.bp.blogspot.com/-oe9htPJjsns/TxhT23FAOfI/AAAAAAAABzo/bmHVWAkh-SQ/s1600/Harry Potter Premier.jpg” imageanchor=”1″ style=”clear: left; float: left; margin-bottom: 1em; margin-right: 1em;”><img border=”0″ height=”238″ src=”https://3.bp.blogspot.com/-DP6i-uXzImA/WrHuFivy_dI/AAAAAAAADdM/_VyOvCr7pJ0D85lHAWkiUa9ZsmUtFxVgACLcBGAs/s1600/APEL.jpg
” width=”320″ /></a></div>
<br />
<div class=”separator” style=”clear: both; text-align: center;”>
<a href=”https://3.bp.blogspot.com/-DP6i-uXzImA/WrHuFivy_dI/AAAAAAAADdM/_VyOvCr7pJ0D85lHAWkiUa9ZsmUtFxVgACLcBGAs/s1600/APEL.jpg
” imageanchor=”1″ style=”clear: left; float: left; margin-bottom: 1em; margin-right: 1em;”><img border=”0″ height=”211″ src=”http://1.bp.blogspot.com/-OVZlatWwzF0/TxhT4uJkcaI/AAAAAAAABzw/2RmQnYiLv3A/s320/Circle Skirt.jpg” width=”320″ /></a></div>
<div class=”separator” style=”clear: both; text-align: center;”>
</div>


Selanjutnya copy kode dibawah ini di postingan blogger anda pada bagian HTML

<table>
<tr>
<td> <img src = “URL” width = “320” /> </ td>
<td> <img src = “URL” width = “320” /> </ td>
<td> <img src = “URL” width = “320” /> </ td>
</ tr>
</ table>


Setelah itu, silahkan ganti kode “URL” dengan tulisan orange diatas pada kode sehinga terlihat seperti berikut ini:

<table>
<tr>
<td> <img src = “https://3.bp.blogspot.com/-DP6i-uXzImA/WrHuFivy_dI/AAAAAAAADdM/_VyOvCr7pJ0D85lHAWkiUa9ZsmUtFxVgACLcBGAs/s1600/APEL.jpg” width = “320” /> </ td>
<td> <img src = “https://3.bp.blogspot.com/-DP6i-uXzImA/WrHuFivy_dI/AAAAAAAADdM/_VyOvCr7pJ0D85lHAWkiUa9ZsmUtFxVgACLcBGAs/s1600/APEL.jpg” width = “320” /> </ td>
<td> <img src = “https://3.bp.blogspot.com/-DP6i-uXzImA/WrHuFivy_dI/AAAAAAAADdM/_VyOvCr7pJ0D85lHAWkiUa9ZsmUtFxVgACLcBGAs/s1600/APEL.jpg” width = “320” /> </ td>
</ tr>
</ table>


Ukuran foto-foto ini khusus untuk blog saya, jadi jika foto terlalu besar atau kecil Anda dapat menyesuaikannya dalam HTML di mana ia mengatakan lebar = “320”. Ubah saja sampai Anda mendapatkan yang Anda inginkan silahkan pratinjau.

Jika Anda ingin 2,3,4,6,10 dst, kolom vertical, anda hanya tinggal tambahkan kode dibawahnya, maka akan terlihat seperti berikut :


Jika ada yang ingin di tanyakan silahkan tulis dikolom komentar dan semoga cara ini berhasil untuk Anda !!

Artikel Terkait:  Cara Simpel Membuat Garis Datar Warna Pada Blog - Garis Horizontal Blogger Blogspot

You May Also Like

2 Comments

  1. Pada contoh diatas hanya satu gambar yang ditampilkan berulang2.
    Bagaimana kalau kita ingin membuat galeri foto dimana gambarnya ada banyak dg ukuran gambar berbeda2 ? Bagaimana supaya bisa tampil rapi di blog kita?

Leave a Reply

Your email address will not be published. Required fields are marked *