Blogspot: Cara Membuat Gambar Berderet (Tersusun) Vertikal di Blog

Blogger.com-Tutorial hari ini akan menunjukkan dua cara untuk menambahkan gambar vertikal secara berdampingan dan membuatnya sejajar dengan gambar horizontal. Saya mempelajari cara melakukannya di Blogger, tetapi Anda juga dapat melakukannya di WordPress menggunakan kode yang sama. Contoh tata letak ditampilkan di bawah ini juga. Ini sangat populer dengan blogger fashion yang suka menampilkan foto-foto pakaian lengkap dan foto detail.

MEMPERBAIKI (SPACE) RUANG ANTARA GAMBAR DI BLOGGER

Pertama, ikuti tutorial ini tentang cara menghapus ruang antara gambar di Blogger. Ini akan membuat semuanya terlihat lebih rapi dan duduk bersama lebih baik dengan membuang ruang berlebih.

Sekarang, masuk ke Theme > Edit HTML dan tepat sebelum kode </b:skin> tambahkan kode berikut. Baris pertama mengubah lebar maksimal gambar Anda akan muncul. Baris kedua membantu menentukan ukuran post-body Anda, jadi lebar konten Anda. Ini hanya akan memastikan bahwa gambar berbaris.

<img src="IMG 001" width="WIDTHpx" /> <img alt="" src="IMAGE 002" width="WIDTHpx" /> 

<img alt="" src="FULL IMAGE URL 003" />

METODE 1 - MENAMBAHKAN SISI GAMBAR DENGAN SISI BLOGGER

1. Unggah gambar Anda ke situs hosting, seperti Photobucket. Saat menambahkan gambar secara vertikal seperti ini di Blogger, sebaiknya gunakan hosting gambar alternatif. Mulai posting baru. Klik tab HTML di Blogger atau tab Teks di WordPress dan tambahkan kode berikut.

<img src="IMG 001" width="WIDTHpx" /> <img alt="" src="IMAGE 002" width="WIDTHpx" /> 

<img alt="" src="FULL IMAGE URL 003" />

atau jika Anda tidak ingin ada celah di antara gambar, gunakan kode ini tanpa spasi.

<img src="IMG 001" width="WIDTHpx" /><img alt="" src="IMAGE 002" width="WIDTHpx" /> 

<img alt="" src="FULL IMAGE URL 003" />

2. Baris pertama adalah untuk dua gambar vertikal, masukkan URL langsung dari Photobucket. Anda perlu menentukan lebar untuk membuatnya berdampingan. Akan ada ruang di antaranya (sekitar 10-12 piksel) sehingga Anda ingin memasukkannya saat menghitung. Baris kedua adalah untuk gambar horizontal normal Anda. Anda tidak perlu menentukan ukuran di sini, terutama jika Anda melakukan langkah 2, tetapi Anda dapat melakukannya jika ingin memastikan mereka berbaris dengan benar. Untuk menambahkan lebar, tambahkan lebar = "WIDTHpx" sebelum penutupan /> seperti di baris pertama.

3. Kemudian klik kembali ke Tulis atau Visual dan mulailah menulis posting blog Anda.

SEBUAH CONTOH GAMBAR VERTIKAL & HORIZONTAL

<img src="URL" width="276px"> <img alt="" src="URL" width="276px" /> 

<img alt="" src="URL" width="560px" />

METODE 2 - GUNAKAN TABEL UNTUK MENAMBAHKAN SISI GAMBAR VERTIKAL OLEH SISI

Ini adalah cara alternatif tetapi sangat mirip untuk menambahkan gambar vertikal berdampingan. Penggunaan tabel memungkinkan Anda menambahkan lebih banyak kode untuk menyesuaikannya. Ini adalah cara HTML yang lebih lama. Saya akan membahas tentang tabel secara lebih terperinci di pos mendatang.

<table>

<tbody>

<tr>

<td><img alt="DESCRIPTION" src="DIRECT IMAGE URL 1" width="WIDTHpx" /></td>

<td><img alt="DESCRIPTION" src="DIRECT IMAGE URL 2" width="WIDTHpx" /></td>

</tr>

</tbody>

</table>