🔔 Aktifkan notifikasi disini Google News

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixyezXDcE4rtfI-DqbxUCwNNr1MmE_MyC4DnuKm19NCFutWXESyDFok4Wru1GVOzwIWvmmq7W5_3Q-PZ4aWPe2wWRueZgo4Ddg2onvRbRD_UREAkpotFANLdzcv0fYcy6j-Jd6BM68lyAE/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixyezXDcE4rtfI-DqbxUCwNNr1MmE_MyC4DnuKm19NCFutWXESyDFok4Wru1GVOzwIWvmmq7W5_3Q-PZ4aWPe2wWRueZgo4Ddg2onvRbRD_UREAkpotFANLdzcv0fYcy6j-Jd6BM68lyAE/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 :)

Mau donasi lewat mana?

SeaBank - Saifullah (9016-9529-0071)

BRI - Saifullah (05680-10003-81533)

BCA Blu - Saifullah (007847464643)

JAGO - Saifullah (1060-2675-3868)

BSI - Saifullah (0721-5491-550)
Merasa terbantu dengan artikel ini? Ayo dukung dengan memberikan DONASI. Tekan tombol merah.
Seorang Guru Bahasa Inggris, Kreator Digital, Editor, Publisher, Advertiser, Blogger, Youtuber, Distributor, Desain Grafis, Web Developer, dan Programmer.

13 komentar

Popular Emoji: 😊😁😅🤣🤩🥰😘😜😔😪😭😱😇🤲🙏👈👉👆👇👌👍❌✅⭐
  1. yey makasih ipul, tutorialnya berfaedah buat aku haha.. nanti bakal dicoba-coba deh biar postingan blog makin menarik juga
    1. Alhamdulillah kak kalau artikelnya bermanfaat buat kakak. Terima kasih atas kunjungannya. Sering² ke sini ya :)
  2. mantap sangat bermanfaat,, makasih infonya
    1. Syukurlah kalau bermanfaat juga buat agan. Sama-sama gan.
  3. Mantap sekali titorialnya gan ..bagus buat ane terapkan di blog.oh ya kalo gambar tidak tampil masalahnha dimana ya
    1. Kalau gambar tidak tampil biasanya masukkan gambar bukan pakai upload tapi pakai copy langsung dari google ke dalam postingan.
  4. Saya sudah coba tapi gambar kok gak bisa pas ditengah border ya...gambar mepet ke atas sedangkan jarak yg bawah masih 0,5 cm.
    Kanan dan kiri bisa sama jaraknya +/- 0,5 cm.
    Mohon petunjuknya...
  5. Saya sudah coba tapi gambar kok gak bisa pas ditengah...gambar mepet ke atas, sedangkan bawahnya masih ada kosong +/- 0,5 cm. Untuk kiri dan kanan pas jaraknya sama +/- 0,5 cm.
    Mohon petunjuknya. Terimakasih...
    1. Caranya letakkan kursor pada pinggir kiri gambar. Lalu tekan "Backspace" sampai gambar mepet dengan garis.

      Setelah itu letakkan kursor ke kanan gambar. Kemudian tekan "Del" sampai gambar mepet ke garis.
  6. Oke...sudah bisa... Terimakasih Kang...
    1. Terima kasih juga sudah berkunjung dan meninggalkan komentar ^_^
      Semoga sehat selalu dan rezekinya lancar :)
  7. Kang saya udah nyoba tapi kok, gambar pas di upload sesui border. Jadi nya kok enggak masuk ke dalam border yang sudah ditentukan... Jadi masalah nya dimana iya kang?
    1. Biasanya itu karena sinyal kurang stabil. Coba refresh dulu halamannya setelah itu baru upload gambar.
Centang Beri Tahu Saya untuk mendapatkan notifikasi ketika komentar kamu sudah di jawab.
Parse:

Gambar Quote Pre Kode



  • Home


  • Follow


  • MENU


  • Share


  • Comment
Cookie Consent
Kami menyajikan cookie di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.