Langsung ke konten utama
loading

Images Content Builder

Images Content Builder

Cari Gambar di Blogspot
Menata Gambar Blogspot (Picture, Image tag builder, Image Lazy builder)

Tool 1

Tombol Build <img> List / URL untuk menata gambar banyak. Opsi untuk ini:

  1. Alternative Text: Menambahkan alternative text gambar (atribut alt di tag <img/>). Jika ini tidak diisi, akan digantikan dengan default text » (Gambar).
  2. Urutkan mulai nomor?: Secara default urutan penomoran baik untuk alt dan title adalah dimulai dari 1. Namun terkadang butuh juga penomoran dimulai bukan dari 1 misalnya ada 11 foto, foto 1 dan 2 disusun 2 kolom, lalu selanjutnya disusun 3 kolom maka waktu pemrosesan foto kedua (3 s.d ke 11) penomoran bisa dimulai pada nomor 3. Jika ini dibiarkan kosong, akan dimulai dari 1.
  3. Pengaturan menata gambar, dua opsi ini harus memilih salah satu:
    1. 2 Columns: Untuk menata gambar dalam 2 kolom (default setting).
    2. 3 Columns: Untuk menata gambar dalam 3 kolom.
  4. Pengaturan orientasi ratio, sesuaikan opsi ini dengan gambarnya. Dua opsi ini harus memilih salah satu:
    1. Landscape (3 : 2): Gambar memanjang ke samping (default setting).
    2. Portrait (2 : 3): Gambar berdiri.
  5. URL Only: Ini akan menghasilkan baris URL gambar kembali namun mengubahnya menjadi bentuk URL image ukuran terbesar di blogspot, mengubah variasi bagian ukuran dalam URL menjadi /s1600/. Fungsi fitur ini sebenarnya banyak berguna dulu ketika google image hasil URL gambarnya adalah URL google dengan parameter, saat ini sudah langsung ke alamat gambar. Jika opsi ini dipilih maka opsi Pengaturan menata gambar tidak berlaku.

Tombol Build <img> Banner untuk membuat HTML khusus banner, gambar kecil yang akan dibesarkan dan diletakkan di banner website. Tombol ini tidak memiliki opsi apapun. Jika memproses 1 URL akan dibuat 1 kode, jika 2, akan membuat 2 kode, hanya alternative text akan diurutkan jika URL lebih dari 1. Tapi jarang sekali ini digunakan untuk banyak URL, sebab 1 halaman biasanya hanya butuh 1 banner.


Tool 2

Optional

Tool 2 ini untuk membuat kode HTML yang ada dalam artikel tetapi tidak ditata untuk berbaris dan bisa dipasang di seantero artikel. Kedua tombol Build <picture> Tag dan Build <img> with Lazy beda bentuk tag saja, untuk Lazy memerlukan script Lazy, sedangkan tag <picture> bisa dipakai di semua situs tanpa script, mirip tag <img> biasa. Opsi-opsi di Tool 2 ini diterapkan sama pada kedua tombol.

  1. Alternative Text: Menambahkan alternative text gambar (atribut alt di tag <img/>). Jika ini tidak diisi, akan digantikan dengan default text » (Gambar).
  2. Pengaturan class, dua opsi ini harus memilih salah satu:
    1. Thumbnail: Gambar memiliki garis tepi (default setting).
    2. Responsive: Gambar tidak bergaris tepi, responsive class.
  3. Pengaturan floating & lebar, dua opsi ini harus memilih salah satu:
    1. Full (600): Lebar 600 pixel tanpa float kanan kiri (default setting).
    2. Float (300): Lebar 300 pixel dengan float kanan atau kiri sesuai dengan Pengaturan Alignment.
  4. Pengaturan Alignment: Ini menentukan alignment (mengapung / penjajaran) gambar ke kanan atau ke kiri, dan hanya berpengaruh jika Pengaturan float & lebar di set ke Float (300). Dua opsi ini harus memilih salah satu:
    1. Left: Float ke kiri (default setting).
    2. Right: Float ke kanan.

Tool 3 (With Caption)

Optional
Required

Tool 3 ini juga untuk membuat kode HTML yang ada dalam artikel dan tidak ditata untuk berbaris juga bisa dipasang di seantero artikel. Kedua tombol Build <picture> Tag dan Build <img> with Lazy beda bentuk tag saja, untuk Lazy memerlukan script Lazy, sedangkan tag <picture> bisa dipakai di semua situs tanpa script, mirip tag <img> biasa. Bedanya dengan Tool 2, di tool 3 ini ada Caption (keterangan / title / judul) di tiap gambarnya. Jika banyak gambar di proses sekaligus maka caption akan diurutkan, misal (Caption - 1, Caption - 2, Caption - 3, dan seterusnya). Ini juga diterapkan pada alternative image (atribut alt). Opsi-opsi di Tool 3 ini diterapkan sama pada kedua tombol.

  1. Alternative Text: Menambahkan alternative text gambar (atribut alt di tag <img/>). Jika ini tidak diisi, akan digantikan dengan default text » (Gambar).
  2. Caption Text: Menambahkan Caption (keterangan / title / judul) dibawah gambar. Jika ini tidak diisi, akan digantikan dengan default text » (Caption).
  3. Pengaturan floating & lebar, dua opsi ini harus memilih salah satu:
    1. Full (600): Lebar 600 pixel, tetap pakai float sebab tanpa float, <div> pembungkus tidak bisa mengapit sisi gambar. Namun jika setting ini dipakai maka di akhir tiap kode gambar akan ditambahkan <div class"clear"></div> agar tidak berdampak pada floating text dibawahnya. Set Pengaturan Alignment ke Left untuk penggunaan biasa. (default setting).
    2. Float (300): Lebar 300 pixel dengan float kanan atau kiri sesuai dengan Pengaturan Alignment.
  4. Pengaturan Alignment: Ini menentukan alignment (mengapung / penjajaran) gambar ke kanan atau ke kiri. Dua opsi ini harus memilih salah satu:
    1. Left: Float ke kiri (default setting).
    2. Right: Float ke kanan.

Tool 4 (Get URLs from HTMLs)

Tool 4 ini berbanding terbalik dengan semua tool sebelumnya. Fungsinya justru membongkar dan menangkap semua URL gambar dari kumpulan tag HTML. Misal dari kode yang sudah dibuat di tool-tool sebelumnya namun ingin melakukan edit model tagnya. Opsi di tool ini ada 6 dan semuanya hanya membedakan jenis data HTML yang akan dibongkar.

Jika HTML khusus gambar saja link anchor yang ada, maka gunakan opsi a atau b, maksudnya yang akan diambil dari href tag a (anchor) yang ada. Tentu saja harus href yang merujuk ke gambar bukan halaman biasa. Intinya sesuaikan dengan datanya. Untuk masing-masing opsi ada 2 itu untuk tanda petik yang ada dalam data HTML, ada yang pakai tanda petik 2 atau tanda petik 1. Misal kalau HTML-nya menulis <a href="URL-GAMBAR"/> pilih a. Kalau ditulis dengan <a href='URL-GAMBAR'/> pilih b, dan seterusnya.

Setelah hasil daftar URL didapat, susun lagi dengan ketiga tool sebelumnya. Seringkali Tool 4 ini untuk membongkar kode dari hasil Tool 1 yang menyusun list gambar.


Result