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.



20 comments:

  1. Tambahan :

      dan jangan lupa mengakhiri tag span dengan /span
    <span class="insertedphoto"><img src="image-URL"></span>
    akan membantu jika lebih dari satu image.  

    ReplyDelete
  2. weh, terima kasih banget, lok... ini koreksi penting...suwun sanget

    ReplyDelete
  3. Terima kasih kembali Mas.
    Biasanya sih multiply.com akan menutupnya secara otomatis jika post-nya lewat compose atau comment repay.
    Akan sedikit jadi masalah apabila mengisinya tidak di "situ", alogaritme akan jadi janggal.
    Debug-nya rodok kangelan ... hehehehe....
    Selamat berkarya.
    Ditunggu artikel berikutnya.

    ReplyDelete
  4. iya... hahaha, memang.... karena "kebiasaan" itu saya sering lupa memberi "tutup"
    trims ya, Lok... correct me if i make a mistake

    *nggak pingin sumbang tulisan serupa?

    ReplyDelete
  5. wah ... nanti aja ... kalo dah bisa, masih jauh ni.
    contohnya situsku ... standart.
    hehehe ... dari ratusan punya rekan2 saya baru post theme 1x saja.
    http://customizedthemes.multiply.com/photos/album/13136/The_Dangdutan_Theme

    makasih sarannya.

    ReplyDelete
  6. oce, ditunggu karya berikutnya, Lok...

    ReplyDelete
  7. tfs!! ini yang gue cari cari.. hehehe

    ReplyDelete
  8. Syukur alex udah gak muter2 nyari. Sering2 nengokin group ini
    Makasi kembali, alex

    ReplyDelete
  9. sama-sama, sering2 main ke sini... :)

    ReplyDelete
  10. asalamuallaikum, tok tok, masuk ahhhh tq bozz infonya

    ReplyDelete
  11. wa'alaikumsalam
    silakan masuk, bayu
    moga berhasil...

    ReplyDelete
  12. Not Found
    This photo album no longer exists.

    Kenapa ya?

    ReplyDelete
  13. hahaha ... biasalah, ada admin di sana yang menghapus theme DK.
    Theme tsb adalah theme pertama DK, ga niru sapa-sapa ... sederhana, pengembangan dari AVLACK.
    Mungkin karena pernah "gegeran" di group lain (group mirip trickmp yg berbasis bahasa ingris ... paling terkenal) ... theme tersebut di-cancel

    Nasib ... nasib ...

    ReplyDelete
  14. klik "Customize My Site" (text-link di bawah Headshot),
    lalu perhatikan, di sebelah atas --bagian berwarna kuning--
    di sana ada Page Layouts...
    Moga membantu :)

    ReplyDelete
  15. O ya, pastikan tidak ada jarak antara <span...> dan <img...> ya. Saya kasih spasi, gambarnya nggak mau keluar di table view :)

    ReplyDelete