Mendesain Related Post

Mendesain itu hal yang menyenangkan. Dari mendesain Template atau Themes untuk blog atau apalah itu yang menarik diedit. Entah kenapa saya menyukai yang namanya edit mengedit, entah dari yang belum saya mengerti atau yang itu-itu saja. Namanya juga belajar? Sebagai manusia normal, diriku pasti mempunyai rasa kurang puas dan selalu pengen yang terbaik walau kenyataannya masih berantakan. Saya menyadari bahwa masih banyak kekurangan, masalah pewarnaan atau pemilihan warna yang pas dan serasi.

Nah daripada cerita panjang lebar masalah kekuranganku mending langsung praktik sajalah. Cara membuat related post wordpress pernah saya posting kemarin. Membuat related post atau artikel berhubungan memang sangat perlu untuk memberitahu tulisan kita keorang lain. Tapi kalo cuma Related post saja memang sangat kurang menarik. Maka dari itu kita harus bisa membuat  lebih menarik untuk dikunjungi. Ada banyak cara untuk membuat jadi bagus dan menarik. Mungkin dengan tutorial dari pak marsudiyanto untuk mempercantik postingan bisa dijadikan alternatif yang mudah?

Perhatian!!!! Sebelum melaksanakan tugas dariku silahkan back up Script Singlepost.php dan style.css kamu untuk mengantisipasi kesalahan!

<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtAXsZIE1H4t2pVylG_Hu9yrCFXPnEeSGh3Z-EgDH28CS9viE4z7_AZFw-T4giXdNKY6rsxQmtWUpLbtDXw-uINxfEp4A6mIuzSHgV4x0C9sFbdGWYqxbuSSQjjoqH14k9JNgW-a-PCbo/s1600/bg1.png) repeat;"><div style="overflow:auto;padding:10px"><span style="color: #000000;">
<p style="text-align: justify;">

<?php
$this_post = $post;
$category = get_the_category(); $category = $category[0]; $category = $category->cat_ID;
$posts = get_posts('numberposts=6&offset=0&orderby=post_date&order=DESC&category='.$category);
$count = 0;
foreach ( $posts as $post ) {
if ( $post->ID == $this_post->ID || $count == 5) {
unset($posts[$count]);
}else{
$count ++;
}
}
?>

<?php if ( $posts ) : ?>
<div>
<p><b>Relate Post</b></p>
<ul>
<?php foreach ( $posts as $post ) : ?>
<li><a href="<?php the_permalink() ?>" title="<?php echo trim(str_replace("n"," ",preg_replace('#<[^>]*?>#si','',get_the_excerpt()))) ?>"><?php if ( get_the_title() ){ the_title(); }else{ echo "Untitled"; } ?></a> (<?php the_time('F jS, Y') ?>)</li>
<?php endforeach // $posts as $post ?>
</ul>
</div>
<?php endif // $posts ?>
<?php
$post = $this_post;
unset($this_post);
?>

<p><b>Posted by:</b> <?php the_author_posts_link(); ?><?php edit_post_link('(Edit)', '', ''); ?> @ <?php the_time('F j, Y'); ?> on <?php the_category(', ') ?></p>

</span></div></div>

Nah kalo itu mungkin cara yang mudah dan sangat simpel. Tapi disini saya mau berbagi dengan ilmu yang tak ngerti dan sudah saya praktikkan. Kalau mau lihat hasilnya silahkan lihat related post di bawah postingn ini? Ya itu hasilnya dan ini kodenya.

Taruh Script dibawah ini di singlepost.php atau bagian postingan di edit themes kamu

<div style="margin: 0pt 0pt 10px;">

<div id="relatedpost">
<center> Mungkin anda perlu membaca tulisan saya yang lain, atau mengunjungi blog sebelah </center>
<div id="muach"><div>

<table style="margin-bottom: 10px; font-size: 90%;" width="100%" border="0" cellpadding="0"

cellspacing="0">
<tbody><tr>
<th scope="col" width="40%" align="left"><a href="http://jidatbaok.com/mendesain-related-post.html" target="_blank">Related Post</a></th>
<th scope="col" width="60%" align="left"> Koleksi Link</th>
</tr>
<tr>

<td valign="top" width="60%" align="left">
<?php
$this_post = $post;
$category = get_the_category(); $category = $category[0]; $category = $category->cat_ID;
$posts = get_posts('numberposts=6&offset=0&orderby=post_date&order=DESC&category='.$category);
$count = 0;
foreach ( $posts as $post ) {
if ( $post->ID == $this_post->ID || $count == 7) {
unset($posts[$count]);
}else{
$count ++;
}
}
?>

<?php if ( $posts ) : ?>
<div>
<ul><li>
<?php foreach ( $posts as $post ) : ?>
<li><a href="<?php the_permalink() ?>" title="<?php echo trim(str_replace("n"," ",preg_replace('#<[^>]*?>#si','',get_the_excerpt()))) ?>"><?php if ( get_the_title() ){ the_title(); }else{ echo "Untitled"; } ?></a></li>
<?php endforeach // $posts as $post ?>
</ul></li>
</div>
<?php endif // $posts ?>
<?php
$post = $this_post;
unset($this_post);
?>
</td>

<td valign="top" width="40%" align="left">
<ul style="margin: 0pt;">
<li><a href="http://jidatbaok.blogspot.com/" target="_blank">Cerita Dewasa</a></li>
<li><a href="http://www.yuda.nab.su/" target="_blank">Yuda official site</a></li>
<li><a href="http://www.jidat.sangpujangga.com/" target="_blank">Sang Pujangga</a></li>
<li><a href="http://jidatbaok.wordpress.com/" target="_blank">My Wordpress</a></li>
<li><a href="http://www.blog.kotareyog.com/author/jidat" target="_blank">Kotareyog.com</a></li>
<li><a href="http://janggala.ponorogo.us/" target="_blank">Janggala Pala</a></li>
<li><a href="http://jdiatbaok.com/" target="_blank">Jidatbaok.com</a></li>
</ul>

</td>
</tr>
</tbody></table>

</div></div></div></div>

Setelah itu buka style.css dan Copas Script dibawah ini

/******************************************
*  Costum Related Post by jidatbaok.com
******************************************/

/* Related post biar mantap!! */
#RelatedPost {border: 1px solid rgb(204, 204, 204); width: 570px; margin: 0pt; padding: 3px 5px; overflow: auto; min-height:135px; max-height: 200px; -moz-border-radius:5px;}
#relpostFs ol {margin: 0 10px 5px 20px;padding: 0 10px;}
/* Script tambahan untuk related post hover */
#muach ul {list-style-type: circle; margin: 0;}

/*-- Tambahan Related Post Tambahan!! --*/
.yuda1{border: 1px solid #F4FAFD;padding: 10px;background-color: rgb(255, 255, 255); -moz-border-radius:5px;margin:5px;}
.yuda{border: 1px solid rgb(192, 192, 192);padding: 5px; width: 580px; background-color: #F4FAFD;-moz-border-radius:5px;/*font: normal 10px Verdana;*/margin:5px;}
.yuda:hover{background-color: rgb(255, 255, 255);}

/*-- Bawah postingan --*/
#jidat {
background: #f7f7f7;
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
padding: 5px;
font:0.8em verdana;
margin-top:20px;
margin-bottom:5px;
clear:both;
display:block;
}
#jidat img{
float:left;
margin:3px 8px 0 0;
}

Nah setelah selesai langsung saja buka salah satu postingan kamu dan lihat dibawah postingan. . . Mantap to? Kalo penempatanyya kurang pas, silahkan dipindah script yang ada disinglepost.php Cuma itu yang aku tahu, jadi apa salahnya mencoba. (funkydance)