Tutorial Tips Wordpress | Margasatrya.com

Update Cara Memasang Artikel Terkait Tanpa Menggunakan Plugin Dan Cara Merubah Tampilannya

Posted: 10 Oct 2010 01:41 AM PDT

Beberapa waktu yang lalu ada pengunjung blog ini yang bernama eserzone (gak tau nama aslinya ), beliau berkomentar pada artikel Cara memasang artikel terkait tanpa plugin, beliau bertanya bagaimana caranya agar tampilan dari artikel terkait bisa seperti yang ada di blog ini. Kebetulan ada update script artikel terkaitnya juga, sekalian saya tulis di artikel ini beserta cara merubah tampilannya.

Untuk anda yang sudah menggunakan script yang saya tulis untuk menampilkan artikel terkait, sebaiknya anda ganti dengan script yang sekarang agar sesuai dengan style-stylenya. Silahkan di simak penjelasan saya

Silahkan anda masuk terlebih dahulu menuju artikel Cara memasang artikel terkait tanpa plugin bagi anda yang belum tahu bagaimana dan dimana cara memasang script artikel terkait ini. Bagi anda yang sudah tahu, langsung saja ganti script anda dengan yang baru di bawah ini.

 <?php $orig_post = $post; global $post; $categories = get_the_category($post->ID); if ($categories) { $category_ids = array(); foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id; $args=array( 'category__in' => $category_ids, 'post__not_in' => array($post->ID), 'posts_per_page'=> 5, // Number of related posts that will be shown. 'caller_get_posts'=>1 ); $my_query = new wp_query( $args ); if( $my_query->have_posts() ) { echo '<div id="related_posts"><h3>Related Posts</h3><ul class="related-posts">'; // Begin Related Post Margasatrya.com Tutorial while( $my_query->have_posts() ) { $my_query->the_post();?> <li> <a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a> </li> <? } echo '</ul></div><hr class="related-line" />'; } } $post = $orig_post; wp_reset_query(); ?>

Setelah itu anda buka file style.css, lalu anda copy seluruh kode css di bawah ini, letakan di baris paling bawah.

 /* margasatrya.com tutorial */ div#related_posts h3{border-bottom:1px solid #CCCCCC;border-top:1px solid #CCCCCC;margin:15px 0 15px;padding:5px 0;} .entry ul.related-posts{list-style:disc outside none;margin:0 0 5px 20px;padding-left:0;} .entry ul.related-posts li {line-height:1.5;padding:3px 0;} .entry ul.related-posts li  a{-moz-border-radius:3px;-webkit-border-radius:3px;background:none repeat scroll 0 0 #EEEEEE;border:1px solid #DDDDDD;padding:1px 3px 2px;color:#19517C;} .entry ul.related-posts li  a:hover{background:none repeat scroll 0 0 #143855;border:1px solid #143855;color:#FFFFFF;} .entry hr.related-line{background:#CCCCCC;margin:5px 0;}