Salah 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.
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! ***
Saya tidak bisa mencoba karena khusus untuk engine wordpress dengan domain sendiri. Sama sekali nggak ada yang memenuhi syarat saya pakai blogspot domain gratis. hehehehehe..
Baca juga tulisan terbaru endar berjudul Membuat banner menggunakan GIMP
Wah, selain ahli sastra, ternyata Pak Sawali ini juga ahli skrip. Menarik banget, Pak.
Cuman, apakah nanti tidak membebani blog pak kalau di halaman depan diberi gambar banyak?
Baca juga tulisan terbaru Edi Psw berjudul Profil Caleg: Beri Dukungan Yuuk…
sayang blog saya belum berdomain sendiri
tapi saya bisa sedikit belajar dari sini, 😉 inginnya bisa edit css 😳
Baca juga tulisan terbaru tomy berjudul Yang Tersembunyi.. (sebuah halaman narsis)
wah ahli css ahli coding juga hahaha salut pak
Baca juga tulisan terbaru genthokelir berjudul Siluman Harga Mati
Model majalah memang bagus tapi menurut saya terlalu uyel2an…
Baca juga tulisan terbaru marsudiyanto berjudul SEO, LEO dan BEO
maka hasil akhirnya nanti akan seperti blog pak sawali ini?
memang keren dan menarik, pak. tapi apa tidak akan mempengaruhi kecepatan loading?
*sambil tetap salut pada pak sawali yang rajin oprek-oprek kode html blog*
Baca juga tulisan terbaru marshmallow berjudul Longed Luxurious Leisure Time
kok web saya kagak muncul tumbnailnya? masalahnya dimana ya mas 😕
.-= Baca juga tulisan terbaru azzaam berjudul "Pada Akhirnya Friendster Akan di Jual Juga" =-.
engine yang digunakan apa, mas azzaam. agaknya kalau wordpress.com tdk diperbolehkan pasang script atau memodifikasi kode html, mas.
Pingback: Catatan Sawali Tuhusetya
Ini tak jajal pak 🙂
mangga, mas jidat. (applause)