Cara Membuat Related Post (Baca Juga) Dalam Posting Blog

IMAGE BY www.bungfrangki.com

Cara Membuat Related Post (Baca Juga) Dalam Posting Blog | Multi-Evolution.tech – Membuat related posts atau artikel terkait pada blog memang dianggap sebagai cara terbaik untuk menurunkan score bounce rates dari blog. Karena pengunjung dipancing untuk tidak segera meninggalkan blog dengan cara menampilkan artikel yang terkait dengan artikel yang sedang dibaca.

Oleh karena itu, pada postingan kali ini saya akan membahas tentang cara membuat related posts secara otomatis berdasarkan “tag” tapi yang berada di dalam postingan, bukan di akhir artikel. Biasanya diawali dengan kata “Baca Juga”.

Seperti ini contohnya..

Baca Juga:

• MovieKhor - Template Blogger Film Profesional
• Sure Mag Professional Magazine Blogger Template
• Perbedaan Kabel SATA dan Kabel ATA

Pasti kamu juga sering melihat Baca Juga ini pada blog misalnya jalantikus.com, seperti ini contohnya :

#1. WordPress.org

Untuk yang menggunakan platform WordPress, memang ada cara yang lebih mudah untuk membuat artikel terkait di dalam postingan ini yaitu dengan menggunakan plugin, contohnya plugin Inline Related Posts.

Namun saya tidak suka tampilannya. Kemudian seperti kita ketahui, akan lebih baik jika bisa meminimalkan penggunaan plugin agar blog bisa loading lebih cepat.

Pertama, letakkan kode berikut ini di bagian bawah file function.php. Kalau kamu masih awam dengan direktori WordPress, file ini berada di wp-content/themes/namatema.

//*custom function untuk menambah Baca Juga secara otomatis
function CodeBacaJuga($atts){
   extract(shortcode_atts(array(
    'number' => 4,
    'tag' => 'default-tag',
    'baca' => '<div class="baca">',
    'titlebaca' => '<div class="titlebaca"><strong>Baca Juga:</strong></div>',
    'contentbaca' => '<div class="contentbaca">',
    'openul' => '<ul>',
    'id' => get_the_ID(),
       ), $atts));
     $return_string .= ''.$baca.''.$titlebaca.''.$contentbaca.''.$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><a target="_blank" href="'.get_permalink().'" title="'.get_the_title().'">'.get_the_title().'</a></li>';
        } 
            } else {
        }
        wp_reset_postdata();
   $return_string .= '</ul>';
   $return_string .= '</div>';
   $return_string .= '</div>';
   $return_string .= '<div class="partner-banner-aftc-baca-juga" style="text-align: center; margin-top: 30px;"></div>';
   return $return_string;
}
//*juraganblog.com
add_shortcode( 'artikel', 'CodeBacaJuga' );

Kalau sudah jangan lupa simpan.

Langkah selanjutnya memasang style CSS – nya biar kelihatan lebih bagus.

Letakkan kode CSS berikut ini pada file style.css yang berada di wp-content/themes/namatema, atau bisa juga melalui menu Appeareance »Customize » Additional CSS.

Berikut kodenya :

.baca{
position: relative;
display: inline-block;
}
.baca .titlebaca{
background-color: white;
position: absolute;
margin-left: 15px;
margin-top: -14px;
padding: 0px 15px;
}
.baca .contentbaca{
border: solid 1px #dddddd;
padding: 20px 20px 0px 20px;
}

Selanjutnya, untuk meletakkan artikel terkait di dalam postingan, tambahkan kode berikut pada bagian artikel dimana Baca Juga akan ditampilkan.

[artikel number=3 tag=”blogging” ]

Number adalah jumlah artikel yang akan ditampilkan, jika dikosongkan maka yang ditampilkan adalah nilai default yaitu 4 artikel. Sedangkan tag adalah artikel yang ditampilkan berdasarkan tag.

Contoh meletakkan kode pada postingan.

Pada contoh di atas, artikel yang ditampilkan 3 buah dengan tag usaha-kreatif.

Apabila tag yang kamu gunakan terdiri dari dua kata, contoh “tutorial blogging”, yang digunakan adalah slug-nya. Normalnya menjadi “tutorial-blogging”.

Sehingga kodenya menjadi : [artikel number=3 tag=”tutorial-blogging” ]

Untuk melihat slug pada tag masuk ke menu Posts » Tags

Tanda warna merah adalah slug.

Kalau artikel yang ingin ditampilkan lebih dari satu tag, gunakan tanda “,” (koma)

Seperti ini contohnya :

[artikel number=3 tag=”blogging,wordpress” ]

Simpan artikel. Sekarang coba lihat hasilnya dengan Preview.

Demikian cara membuat related post (Baca Juga) dalam posting blog WordPress.org

#2. Blogger (Blogspot.com)

Sedangkan untuk blogger (blogspot.com) kamu harus meletakkan kode-kode berikut ini tepat di atas kode </head>.

Tapi sebelumnya, sebaiknya backup terlebih dahulu template kamu untuk menghindari hal-hal yang tidak diinginkan sehingga kamu tetap memilikinya data cadangan.

Letakkan di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
  </b:if>

Langkah selanjutnya..

Cari kode <data:post.body/>

Hapus kode tersebut dan ganti dengan kode berikut ini..

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='post-terkait'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/3);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

Untuk mempercantik tampilan, sisipkan kode CSS berikut ini, dan letakkan di atas kode </style> atau ]]></b:skin>

.post-terkait {position:relative;background:#fff;padding:0;margin:10px 15px 0 0;float:left;width:165px;border:1px solid #1b71bc}
.post-terkait h4{background:#1b71bc !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:uppercase;color:#fff !important}
.post-terkait ul {margin:0;padding:0}
.post-terkait ul li {list-style:none !important;padding:7px 0;margin:0 7px;border-bottom:2px dotted #ddd;line-height:1.4em !important;text-align:left !important}
.post-terkait ul li:last-child{border:none !important}
.post-terkait a {color:#1b71bc;font-size:13px !important}
.post-terkait a:hover {text-decoration:underline}

Jika sudah, simpan template..

Selamat mencoba.. Tinggalkan komentar jika berhasil ya.. 

Demikian artikel Cara Membuat Related Post (Baca Juga) Dalam Posting Blog,

Semoga bermanfaat..

Happy blogging guys..

Share this post