Gambar thumbnail atau gambar preview gunanya untuk menarik minat pengunjung membaca postingan kita.
XtGem sudah menyediakan berbagai pilihan tampilan blog seperti, header only (judul saja), header and truncated post body (judul dan kilasan post), header and post body (judul dan post), header and first image (judul dan gambar), header and truncated post body and first image (judul dan kilasan post dan gambar). Tampilan gambar thumbnail pada XtGem mengikuti ukuran gambar isi post, tentu saja membuat tampilan post jadi kurang rapi jika ukuran gambar thumbnail beda-beda dan loading akan terasa berat jika ukuran gambarnya besar semua, apalagi ditambah display post yang banyak.
Agar ukuran gambar thumbnailnya sama dan rapi, simak caranya dibawah ini.

Kode xt blog dengan penyunting teks, ubah display menjadi 5 atau 4. Perhatikan yang berhuruf tebal/bold.

show_time="1" display="5" entries_per_page="6" comments_per_page="20"

Jika penyuntingan xt blog dalam alat pembangunan, di pengaturan Post Display pilih yang terakhir yaitu Header and truncated post body and first image, atau yang Header and first image. Lihat gambar dibawah.

Setelah selesai penyuntingan xt blog, copy kode dibawah ini dan paste/tempel di CSS yang kamu pakai. Perhatikan simbol buka tutup { } jangan sampai ada yang kurang dari CSS yang ada dan yang ditambahkan, jika kurang simbol { } CSS bisa eror.
.xt_description { display: inline-block; margin: 1px; padding: 0; background: transparent; } .xt_description img { margin: 1px; padding:1px; float: left !important; width:100px; height:100px; display: block; vertical-align: top; border: 1px solid #dcdcdc; border-radius: 5px; }

Perhatikan kode didalam textarea, kode width:100px dan height:100px adalah ukuran gambar thumbnail, kode yang lain silakan diubah-ubah sendiri sesuai keinginan, saya anggap kamu sudah paham.
Jika benar dan tepat mengikuti cara diatas, maka gambar thumbnail post blog akan seperti gambar dibawah ini.


Bagi ke: