Monday, July 7, 2008

Pasang Thumbnail-Image di Kolom Type dari Table View


Tampilan posting di rumah (site) kita bisa di-konfigurasi sesuai pilihan yang telah disediakan (gambar Page Layouts). Untuk pilihan Table View, maka isi posting akan ditampilkan seperti sebuah daftar isi dalam bentuk tabel.

Agar lebih mudah, saya tampilkan contoh dari rumah saya. Kalau link-Blog di klik maka akan muncul tampilan seperti gambar di bawah.

Perhatikan, pada kolom Type ada yang berisikan image berupa foto dan ada yang menampilkan ikon standar Blog (pena berwarna kuning di atas selembar kertas).


Untuk menampilkan image pada kolom Type, hanya dibutuhkan satu baris pendek skrip-CSS. Letakkan/tuliskan skrip-CSS persis sebelum kode-URL gambar atau image yang ingin ditampilkan.

Skrip:
<span class="insertedphoto">[kode-URL image]</span>

Kode-URL image biasanya seperti ini:
<img src="image-URL">

Cara menempelkan skrip:
  1. Copy skrip di atas.
  2. Pilih blog mana yang akan dikerjakan.
  3. Klik Edit pada blog yang ingin ditempelkan skrip ini.
  4. Tik (memberi tanda cek) kotak kosong kecil di kanan tulisan Edit HTML (perhatikan window-blog, sebelah kanan atas).
  5. Cari kode-URL image yang akan ditampilkan di kolom Type pada Table View. Hati-hati, karena yang muncul adalah tulisan dan kode-kode HTML.
  6. Paste-kan pada posisi tepat sebelum kode-URL image yang ada dalam blog.
  7. Jangan lupa, klik Save.
  8. Selesai.
Gampang, kan?! Mudah, to?! Coba, deehh....

PEMBARUAN:
Terimakasih untuk Lilok atas koreksi kealpaan yang telah saya lakukan.

UPDATE:
Daftar isi dalam bentuk tabel dapat tampil lebih nyaman, bila kita gunakan fitur pengaturan otomatis berdasarkan lebar image. Bukan dengan cara membesarkan atau mengecilkan image dengan mouse, tapi dengan menambahkan kode pada <img src="image-URL">:

width="xyz"

sehingga "Kode-URL image" menjadi:

<img src="image-URL" width="xyz">

Lakukan penyesuaian nilai xyz sesuai keinginan.

Hasilnya adalah seperti ini (lihat kolom Type paling kiri) :



Ada pengaturan lain yang menjadi pasangan dari lebar, yaitu berdasarkan tinggi atau height. Cara penulisannya idem-ditto. Silakan bereksperimen.

Selamat mencoba.