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 :

Artikel Terkait:  Cara Membuat Formulir Pemesanan Online di WordPress (Langkah demi Langkah)


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

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 *