Cara membuat gambar berjejer dan bisa di scroll di blogger

Untuk mempercantik tampilan blog, terutama untuk bagian postingan blog, salah satu yang sering dilakukan adalah dengan menambahkan gambar.

Namun terkadang kalau gambar yang akan di posting berjumlah banyak tentu membutuhkan tempat yang banyak kalau dibuat vertikal atau dari atas ke bawah.

Nah kali ini saya akan bagikan tutorial bagaimana membuat gambar berjejer / berderet horizontal (dari kiri ke kanan) di postingan blog anda atau bahkan membuat gambar berderet (biasanya konten gambarnya saling berhubungan) dan bisa di scroll seperti gambar contoh yang ada di playstore.

Silahkan ikuti tutorial cara membuat gambar berderet / berjejer horisontal berikut ini:

1. Masuk / Login ke akun Blogger
2. Pilih ENTRI BARU
3. Buatlah tulisan seperti biasa
4. Kemudian Pilih HTML, pada pojok kiri atas
5. Masukan  salah satu  Kode dibawah
6. Kembali ke compose lihat preview
7. Setelah semua sukses kemudian "Publikasikan"


untuk gambar berjajar tanpa scroll silahkan copy kode berikut dan edit untuk memasukkan url gambar anda

<table>
<tr><td>
<img src='url-gambar1.jpg-disini'/>
</td>
<td>
<img src='url-gambar2.png-disini'/>
</td>
<td>
<img src='url-gambar3.gif-disini'/>
</td></tr>
</table>

Untuk gambar sejajar di tengah copy kode di bawah ini:

<center/>
<table>
<tr><td>
<img src='url-gambar1.jpg-disini'/>
</td>
<td>
<img src='url-gambar2.png-disini'/>
</td>
<td>
<img src='url-gambar3.gif-disini'/>
</td></tr>
</table>
</center>

Untuk gambar sejajar dan biar ukurannya jadi sama (rubah nilai hight & width sesuai keinginan anda) silahkan copy kode berikut:

<div style="text-align: center;">
<img border="none" height="200" src="Url-gambar1-anda-disini" width="100"/>
 <img border="none" height="200" src="Url-gambar1-anda-disini" width="100"/>
 <img border="none" height="200" src="Url-gambar1-anda-disini" width="100"/>
</div>

Untuk gambar sejajar dengan scroll seperti contoh gambar1 di atas (rubah prosentase width jika gambar masih belum sesuai) silahkan copy kode di bawah ini

<div style="border: 2px solid black; height: 320px; overflow-x: auto; overflow-y: auto; width: auto;">
<div style="width: 228%;"><div style="text-align: center;">
<img border="none" height="320" src="Url-gambar1-anda-disini" width="180"/>
<img border="none" height="320" src="Url-gambar2-anda-disini" width="180"/>
<img border="none" height="320" src="Url-gambar3-anda-disini" width="180"/>
<img border="none" height="320" src="Url-gambar4-anda-disini" width="180"/>
</div></div>
</div>

Notes: Anda bisa menambah atau mengurangi jumlah gambar sesuai keinginan anda.

Share :