Menampilkan Thumbnail di Halaman Depan

thumbnailSalah satu daya tarik sebuah blog adalah tampilan alias theme. Trend tampilan halaman depan sebuah blog belakangan ini adalah format majalah dengan menampilkan thumnail (image) di bawah judul. Salah satu theme blog yang memiliki ciri khas format majalah pada halaman depan adalah theme revolution karya desainer Bryan Gardner. Dengan tampilan wajah seperti itu, halaman depan blog menjadi lebih menarik.

Selain kode bawaan dari theme tertentu, kita juga bisa membuat tampilan blog kita seperti dalam format majalah dengan memodifikasinya. Berikut ini adalah kode untuk menampilkan thumbnail pada halaman depan, khususnya untuk engine wordpress dengan domain sendiri.

<?php
if (have_posts()) : $count = 0;
while(have_posts()) : the_post();
$count++;
if ($count>2) break;
?>
<?php $postimageurl = get_post_meta($post->ID, ‘image’, true); if ($postimageurl) { ?><h1><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h1>
<div style=”border-bottom:2px dotted #94B1DF; margin-top:0px;margin-bottom:5px; padding:0px 0px 0px 0px; clear:both;”></div><p style=”font-size:11px; font-family:arial;font-weight:bold;margin:0px 0px 0px -3px;”><span class=”time”>(<?php the_time(‘j F Y’) ?>, <?php if(function_exists(‘the_views’)) { the_views(); } ?>, <a href=”<?php comments_link(); ?>”><?php comments_number( ‘0 respon’, ‘1 respon’, ‘% respon’); ?></a> ) <?php edit_post_link(‘(e)’, ”, ”); ?></span></p><div style=”border-bottom:2px dotted #94B1DF; margin-top:5px;margin-bottom:5px; padding:0px 0px 0px 0px; clear:both;”></div><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><img style=”float:left;width:140px;height:135px;border:0px solid #eee;margin:3px 5px 0px 0px;” src=”<?php echo $postimageurl; ?>” alt=”<?php the_title(); ?>” /></a><?php } ?><?php the_content(); ?><div style=”border-bottom:0px dotted #94B1DF; margin-bottom:10px; padding:5px 0px 5px 0px; clear:both;”></div><?php endwhile; endif; ?>

Kode tersebut digunakan untuk mengganti kode asli yang terdapat pada file index.phppada theme yang kita gunakan. (Silakan cari pada theme editor!) Sebelum diganti, kode asli sebaiknya di-back-up dulu. Hal ini dimaksudkan untuk berjaga-jaga apabila terjadi error. Angka 2 pada kode menyatakan jumlah postingan yang akan ditampilkan di halaman depan. Angka 2 bisa diganti sesuai selera kita. Sedangkan, angka 300 pada kode <?php the_content_limit(300); ?> menunjukkan jumlah karakter yang akan ditampilkan pada setiap postingan. Kita juga bisa mengganti angka tersebut sesuai panjang pendeknya penggalan postingan yang akan ditampilkan.

Jangan lupa, ketika kita memosting tulisan, masukkan link image (gambar) yang kita upload pada value dan klik atau ketik “image” (tanpa tanda kutip) pada kolom nama pada fitur Add new custom field: yang terdapat di bawah text-editor. Kemudian, klik add custom field.

Nah, selamat mencoba, semoga berhasil! Salam ngeblog! ***

No Comments

Tinggalkan Balasan ke Sawali Tuhusetya Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *