Menampilkan Popular Post Tanpa Plugin

Berbagi tips lagi nieh di dunia blogging. Kali ini Blogger Jelek akan berbagi tips cara membuat Popular Post atau Artikel terpopuler tapi tanpa menggunakan plugin. Sebenarnya banyak plugin yang bisa digunakan untuk menampilkan Popular Post ini dan ada beberapa template yang sudah menyematkan Popular Post dalam templatenya.

Nah, kalo dalam templatnya belum ada. Kalian bisa menggunakan cara berikut ini. Oiya ngomongin masalah Popular Post apa sih keuntungannya? Popular Post akan membertahukan kepada pengunjung atau pembaca blog kalian tentang artikel yang paling popular di blog kalian. Pasti para pembaca juga akan penasaran apa sih istimewanya atau menariknya dari tulisan kalian yang menjadi popular post ini. Dia pun akan tertarik untuk membacanya. Ujung-ujungnya tetep buat nambahin page view..hehe ^_^

Oke, langsung aja deh nggak perlu barpanjang lebar

<div id="popular-post">
<ul>
<h3 align="center">Postingan Terpopuler</h3>
<?php
$pc = new WP_Query('orderby=comment_count&posts_per_page=5'); ?>
<?php while ($pc->have_posts()) : $pc->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(array(5,5)); ?></a>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>
</div>
<div></div>
</div>

Silakan Copy Paste kode di atas ke tempat dimana kalian pengen memunculkan Populer Post tersebut.  Kalo pengen memunculkan di Sidebar, silahkan paste di file sidebar.php. atau bisa juga kalian tempatkan di bawah related post. Suka-suka lah pokoknya.

Oke, untuk tampilan lebih menarik bisa deh sedikit tambahin kode CSS. Tambahkan di style.php

#popular-post { list-style:none; width:48%; float:left; } /*Set the width of your popular post*/
#popular-post li { overflow:auto; margin:0px 0px 10px 0; border-bottom:1px solid #E6E6E6; padding-bottom:5px; } /*Style your post list, I have opted for a bottom border which is 1 pixel thick.*/
#popular-post li img { float:left; margin-right:10px; border:4px solid #EEEEEE;} /*Give your thumbnail taken from the featured image a nice border! A thick border adds to the effect.*/
#popular-post li a { text-decoration:none; font-weight:bold; color:#1e292b;} /*Give your active links a bit of color.*/
#popular-post li p { margin-top:10px; }

Selesai dah. Oiya popular post di atas berdasarkan banyaknya komentar yang ada di tiap postingan. Jadi semakin banyak komentar yang ada maka artikel tersebut yang akan muncul di Popular Post ini.

Selamat mencoba.. ^_^