How to Start a Blog? Panduan Lengkap Membuat Blog Hanya 30 Menit

Membuat Trending di WordPress Tanpa Plugin

Bagaimana cara membuat trending dari postingan seperti yang terlihat di header dari blog centerklik ini? yang menggunakan wordpress, sebenarnya banya plugins yang tersedia tapi kali ini saya akan mencoba membuatnya tanpa plugins, atau seperti website-website berita seperti pada umumnya.
Buat script untuk Function terlebih dahulu seperti dibawah ini dan letakkan di fungtion.php template wordpress yang anda gunakan, script dibawah ini digunakan untuk memotong title :

/*----------------------------------------*/
/*	Post Title Pendek
/*----------------------------------------*/
function mts_short_title($after = '', $length){
	$mytitle = get_the_title();
	if ( strlen($mytitle) > $length ){
		$mytitle = substr($mytitle,0,$length);
		echo $mytitle . $after;
	}
	else { echo $mytitle; }
}

Setelah itu tambahkan script dibawah ini di header saya meletakkan code dibawah ini dibawah body jika di theme twenty fourteen, jika di template saya ini saya letakkan di header.php

<div class="trending-articles">
				<ul>
					<li class="firstlink"><?php _e('Trending','nama_template_anda'); ?>:</li>
					<?php $i = 1; $my_query = new wp_query( 'cat='.'&posts_per_page=4&ignore_sticky_posts=1' ); ?>
					<?php if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post(); ?>
						<li class="trending <?php if($i % 4 == 0){echo 'last';} ?>">
							<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" rel="bookmark"><?php mts_short_title('...', 24); ?></a>
						</li>
					<?php $i++; endwhile; endif;?>
				</ul>
			</div>

untuk mempercantik tampilan tambahkan code css dibawah ini atau anda tambahkan sendiri code CSS sesuai dengan desain anda sendiri untuk template anda.

.trending-articles {
    background: #2a2a2a;
    border-bottom: 1px solid #000;
    float: left;
    width: 100%;
    position: relative;
    z-index: 100;
}
.trending-articles ul { list-style: none }
.trending-articles li {
    border-right: 1px solid #7D7D7D;
    color: #fff;
    float: left;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2em;
    margin: 10px 0 9px;
    padding: 0 13px;
    text-transform: none;
}
.trending-articles li.firstlink {
    border: none;
    padding-left: 20px;
}
.trending-articles li.last { border: none }
.trending-articles li a {
    color: #00c0ad;
    display: block;
}
.trending-articles li a:hover { color: #fff }

berikut adalah tutorial untuk membuat trending sederhana pada wordpress tanpa plugin. selamat mencoba, dan jika ada pertanyaan silahkan tinggalkan komentar.

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Google+.

Daftar isi Tutorial Wordpress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

WebHostingPad

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

5 Comments

Add a Comment

Your email address will not be published. Required fields are marked *

Must Read...!
Theme WordPress FruitFul Responsive Free

Template Fruitful adalah Template Wordpress Responsive Free yang di desain dengan tampilan yang bersih...

Theme WordPress Bigfoot Responsive Free

Bigfoot adalah Template Wordpress yang didesain dengan tampilan yang Full, Responsive, indah dengan slide...

Close