Cara Menyusun Banyak Gambar Agar Tertata Rapi Dalam Postingan Blog

Menulis artikel di blog merupakan kegiatan yang tidak bisa dipisahkan dari seorang blogger. Jika dilihat dari aktivitasnya, menurut saya mereka tidak hanya seorang penulis, melainkan juga designer dan sekaligus seorang programmer. Bagaimana tidak, selain menulis, setidaknya sedikit banyak mereka harus bisa mendesain website sendiri.

Memang sebagian kecil dari blogger ada yang meminta/menyewa jasa orang lain untuk mengurus desain blognya. Namun kebanyakan, mereka sendirilah yang menciptakan dan mengedit tampilannya. Ada beberapa keuntungan yang diperoleh dari mengatur blog sendiri, di samping akan lebih mengenal seluk beluk blog, kita juga akan lebih mudah menata menu, navigasi, dan widget bila ada yang perlu ditambah maupun dikurangi.

Nah letak programmer nya dimana? Ya tentu di saat mereka mendesain blog. Desain di sini berbeda dengan desain yang lain, karena untuk menciptakan blog yang berpenampilan menarik dan memiliki kecepatan yang tinggi. Seorang blogger harus mengerti tentang kode-kode CSS, JavaScript, dan HTML.

Mengetahui cara penggunaan dan fungsi kode-kode ini sangatlah penting karena tidak jarang permasalahan muncul di blog dan penanganannya harus menggunakan kode-kode tersebut. Salah satu contohnya adalah yang akan saya bahas kali ini yaitu masalah penataan gambar pada postingan. 

Banyak yang baru terjun ke dunia blogging bingung tentang penataan postingan, terutama penataan pada gambarnya. Meskipun di blog sudah tesedia fitur left, center, dan right untuk mengatur posisi, serta fitur small, medium, large, extra large dan original size untuk mensetting ukuran,. Tapi semua itu belum cukup karena posisi gambar masih sulit untuk diarahkan jika kita menyajikan gambar yang lumayan banyak.

Oleh sebab itu penguasaan kode dibutuhkan di sini. Kita harus mencantumkan Script di dalam postingan sebelum mengupload foto yang akan kita susun. "Apa yang akan terjadi bila tidak menggunakan kode tersebut saat upload banyak gambar?" Berikut akan saya beri contoh hasil tanpa dan dengan Script.

1. Tanpa Menggunakan Script
Sangat sulit diatur supaya sejajar dan rapi, padahal sudah menggunakan ukuran yang terkecil dan berulang kali merubah posisi (left, center, right).

3D Miniatur

Giant

Up and Up

2. Dengan Menggunakan Script

Sangat mudah diatur berapapun jumlah dan ukurannya. Ukuran dan posisi gambar bisa ditata sesuka hati. Tampilan juga menjadi lebih menarik

    A. Contoh gambar dengan border

3D Miniature	Skydiving	Miniature

    B. Contoh gambar tanpa border

Dispersion	Angels	Smoke

Bagaimana? lebih tersusun rapi pakai Script, bukan?
Lalu bagaimana cara menggunakannya?

Mari simak langkah-langkah berikut ini:
1. Ketika ingin memasukkan gambar pada postingan, klik HTML. Copy-Paste script berikut ke dalam postingan.

<center>
<table border="1">
<tr>
<td>linkgambar1</td>
<td>linkgambar2</td>
<td>linkgambar3</td>
</tr>
<tr>
<td>namagambar1</td>
<td>namagambar2</td>
<td>namagambar3</td>
</tr>
</table>
<table border="2">
<tr>
<td>linkgambar4</td>
<td>linkgambar5</td>
<td>linkgambar6</td>
</tr>
<tr>
<td>namagambar4</td>
<td>namagambar5</td>
<td>namagambar6</td>
</tr>
</table>
</center>

2. Klik Compose, maka script tadi akan berubah menjadi tabel.

3. Hapus tulisan linkgambar1, klik icon Insert Image > Choose Files > cari gambar untuk dimasukkan ke kotak pertama. Jika sudah, klik gambar tersebut dan pilih small. Lakukan langkah ini berulang sampai ke linkimage6. Sedangkan namagambar1 sampai namagambar6 diubah sesuai keinginan.

Catatan:

• Linkgambar: Tempat memasukkan gambar
• Namagambar: Tempat memasukkan keterangan/caption
• Angka 1 dan 2 bewarna merah pada script adalah ukuran ketebalan garis kotak (border). Jika tidak ingin memakai border ganti dengan angka 0.
• Apabila ingin menambah atau mengurangi jumlah kotak, Copy-Paste atau Hapus kotak yang dimaksud. Perlu diingat bahwa script linkgambar dan namagambar berpasangan, jadi kalau ingin menambah atau menghapus, maka harus beserta pasangannya.
• Jika ingin mengubah ukuran gambar, masuk ke HTML, kamu akan menemukan script seperti bawah ini. Kemudian ganti angka pada height (tinggi) dan width (lebar). Sedangkan 0em adalah untuk mengatur antara jarak tepi gambar dengan border. 0em berarti tidak ada jarak, otomatis border pas di tepi gambar. Bila diganti jadi 1em atau 2em atau lebih besar lagi, maka jarak tepian gambar dan border akan semakin jauh.

<td><div class="separator" style="clear: both; text-align: center;">

<a href="https://1.bp.blogspot.com/-OI6swZiBkJU/WclOrLI44YI/AAAAAAAAG_I/-Lsa4GZrk7MApaC8NArnVMKnbNuYahfqACLcBGAs/s1600/1501322252-picsay.jpg" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" data-original-height="1200" data-original-width="1600" height="150" src="https://1.bp.blogspot.com/-OI6swZiBkJU/WclOrLI44YI/AAAAAAAAG_I/-Lsa4GZrk7MApaC8NArnVMKnbNuYahfqACLcBGAs/s200/1501322252-picsay.jpg" width="200" /></a></div>

</td>

Jika sudah selesai di edit, kembali lagi ke Compose untuk melihat hasilnya. Terakhir apabila dirasa semua telah sesuai, tekan Publish.

Jika ada yang bingung silakan tanyakan melalui kolom komentar. Semoga bermanfaat :)