Update: Cara Memasang Related Post Ditengah Artikel (Inline Related Post)

Memasang related post didalam suatu blog menurut saya wajib hukumnya. Apalagi untuk blog yang orientasinya sebagai moneysite. Tentu saja memasang related post ini akan memberikan banyak sekali manfaat. Nah, jika biasanya related post ini diletakkan pada bagian sidebar atau biasa juga dipasang pada bagian paling bawah, iya biasanya deketnya footer, nah kali ini saya akan berbagi tutorial mengenai cara memasang related post di tengah-tengah artikel atau biasa disebut dengan inline related post.

Jika ditanya manfaatnya inline related post ini apa? Ya sudah pasti agar visitor betah berlama-lama didalam blog kita. Dengan menampilkan saran artikel-artikel terkait ditengah-tengah artikel tentu akan membuat visitor tertarik membukanya. Dan apa yang terjadi selanjutnya? Sudah ketebak kan ya.. secara otomatis pageviews akan bertambah, persentase bounce rate akan menurun, dan yang tak kalah penting yaitu penghasilan Adsense juga akan ikut naik (kalo masang iklan Adsense lho yak).

Memasang Related Post di Tengah Artikel

Nah bagi pengguna WordPress, seperti biasa ada 2 metode yang bisa kamu gunakan untuk memasang related post ditengah artikel. Pake plugin atau pake cara manualan.

– Menggunakan Plugin

Bagi pemula yang suka instan-instan saja, menggunakan plugin adalah langkah yang tepat. Ada banyak plugin related post yang bisa kamu install secara gratis dari repo WordPress. Salah satu yang saya rekomendasikan adalah plugin Inline Related Post.

Jika kurang srek dengan tampilannya, tinggal masuk saja di bagian menu Settings » Inline Related Post. Didalamnya kamu bisa mengatur tema, warna, ukuran, posisi, dll. Tinggal setting-setting saja sesuai selera.

– Tanpa Menggunakan Plugin

Nah bagi temen-temen yang sudah cukup expert bisa mencoba menggunakan metode tanpa plugin. Caranya ga terlalu susah kok, cukup paste script berikut kedalam file functions.php temamu. Lalu save.

<?php
function ShortCodeIseng($atts){
extract(shortcode_atts(array(
'number' => 3,
'tag' => 'default-tag',
'bacajuga' => '<div class="bacajuga">',
'titlebaca' => '<div class="titlebaca"><strong>Baca Juga:</strong></div>',
'contentbaca' => '<div class="contentbaca">',
'openul' => '<ul>',
'id' => get_the_ID(),
), $atts));
$return_string .= ''.$bacajuga.''.$titlebaca.''.$openul.'';
$the_query = new WP_Query(array('tag' => $tag, 'orderby' => 'date', 'order' => 'DESC' , 'showposts' => $number , 'post__not_in' => array( $id ), 'tag__not_in' => array(00001, 00002, 00003) ));

if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post();

$return_string .= '<li><strong><a target="_blank" href="'.get_permalink().'" title="'.get_the_title().'">'.get_the_title().'</a></strong></li>';

}
} else {
}
wp_reset_postdata();
$return_string .= '</ul>';
$return_string .= '</div>';
$return_string .= '<div class="partner-banner-aftc-baca-juga" style="text-align: center; margin-top: 30px;"></div>';

return $return_string;
}
add_shortcode( 'postingan', 'ShortCodeIseng' );
?>

Setelah itu tambahkan CSS berikut di Appearance » Edit CSS, kalo temanya sudah mendukung custom CSS tinggal dipaste saja.

.bacajuga{
position: relative;
display: inline-block;
}

.bacajuga .titlebaca{
background-color: white;
position: absolute;
margin-left: 30px;
margin-top: -14px;
padding: 0px 15px;
}

.bacajuga .contentbaca{
border: solid 1px #dddddd;
padding: 20px 20px 0px 20px;
}

Secara default, script inline related post diatas akan menampilkan 3 artikel berdasarkan suatu tag pada setiap artikelmu. Jadi kalau suatu post gaada tagnya, ya gabakalan muncul related postnya 😀

Update: Inine Related Post Berdasarkan Kategori

Nah buat temen-temen yang tertarik membuat inline related post seperti yang ada di blog ini, sebenernya caranya gampang banget. Jadi kita hanya perlu memanfaatkan plugin Contextual Related Posts dengan sedikit tambahan custom CSS. Plugin ini bisa kamu download secara gratis melalui repo WordPress. Jadi langsung install dan aktifkan saja pluginnya.

Lalu langkah selanjutnya masuk ke Settings » Related Posts. Silahkan konfigurasi seperti berikut:

• Cache Output: yes
• Automatically add related posts to: posts
• Insert after paragraph number: bebas (kalo saya 5)
• Number of related posts to display: bebas (kalo saya 3)
• Title of related posts: <b class=”omg”>Baca Juga:</b>
• Location of post thumbnail: Do not display thumbnails, only text.
• Style of the related posts: Text only

Jangan lupa masukkan CSS ajaib berikut kedalam kolom custom CSS.

.omg {
font-weight: 700;
border-radius: 5px;
color: white;
position: absolute;
margin-left: 30px;
margin-top: -33px;
border: solid 2px #006699;
padding: 0px 5px 0px 5px;
background-color: #006699;
}

.crp_related {
border: solid 1px #f8f8f8;
background-color: #f8f8f8;
border-radius: 10px;
padding: 20px 10px 0px 10px;
font-weight: 700;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.16);
margin-bottom: 20px;
}

.crp_title {
color: #55595b;
font-size: 14px;
}

Jika sudah beres, klik save settings. Done.

Mudah bukan? Keuntungan yang bisa kita dapatkan dengan menggunakan plugin contextual related posts ini adalah, kita bisa mendapatkan inline related post berdasarkan Kategori. Jadi tidak seperti plugin inline related post yang menampilkan related post berdasarkan Tag. Selain itu adanya kolom custom CSS makin memudahkan kita untuk mempercatik tampilan related post.

Demikian cara menambahkan inline related post pada WordPress. Selamat mencoba dan semoga bermanfaat.