Cara Membuat Artikel Terkait (Related Post) dalam Postingan Blog

Baca Juga

POSISI artikel terkait (related post) biasanya ada di bagian bawah postingan. Related Posts juga bisa ditampilkan di tengah-tengah artikel atau di sela-sela postingan, sebagaimana biasa ditampilkan situs-situs berita dengan judul "Baca Juga".

Related post di tengah artikel ini lazim kita temukan di situs-situs berita dan situs web besar. Tujuan atau fungsi artikel terkait di tengah postingan atau di dalam artikel ini untuk menurunkan bounce rate dan memancing pengunjung agar mau membaca artikel lain.

Anda ingin membuatnya di blog Anda? Fungsinya sih sebagai navigasi sekaligus internal link yang bisa menambah ke-SEO-an konten blog.

Cara Membuat Related Posts dalam Postingan Blog

Berikut ini Cara Membuat Artikel Terkait (Related Post) Dalam Postingan Blog sebagaimana dishare Bung Frangki. Desainnya sudah saya ubah menjadi "full width" atau lebar 100% mengikuti area postingan.

1. Tema > Edit HTML

2. Copas kode CSS Artikel Terkait (Related Post) dalam Postingan Blog berikut ini di atas kode ]]></b:skin>

.post-terkait {position:relative;background:#fff;padding:0;margin:15px 0;float:left;width:100%;}
.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;line-height:1.4em !important;text-align:left !important;border-bottom:1px dotted #eee;}
.post-terkait a {color:#1b71bc;}
.post-terkait a:hover {text-decoration:underline}

2. Copas kode JavaScript Artikel Terkait (Related Post) dalam Postingan Blog berikut ini 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>

3. Cari (Ctrl+F) kode <data:post.body> yang kedua, lalu hapus!
4. 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 class='artbody' expr:id='&quot;post2&quot; + data:post.id' 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>

5. Save! Simpan template.

Itu dia Cara Membuat Artikel Terkait (Related Post) dalam Postingan Blog. Mudah 'kan?

Kode Related Post Tengah Artikel Lainnya

Berikut ini kode related post di tengah postingan lainnya dan cara memasangnya di template blog Blogger Anda.

1. Klik Theme > Edit HTML

2. Cari kode <data:post.body/> dan simpan semua kode berikut tepat DI BAWAHNYA.

<b:if cond='data:view.isPost'>

  <script> //<![CDATA[

    // Related Posts Middle

    var jumlah = 4;

    eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('c a=["\\e\\d\\s\\Q\\f\\C","\\d\\s\\f\\h\\W","\\B\\d\\d\\I","\\V\\f","\\f\\k\\f\\e\\d","\\e\\k\\s\\S","\\h\\d\\e","\\r\\e\\f\\d\\h\\s\\r\\f\\d","\\C\\h\\d\\B","\\h\\r\\s\\I\\F\\U","\\B\\e\\F\\F\\h","\\m\\O\\e\\l","\\T\\h\\k\\f\\d","\\m\\e\\k\\l\\m\\r\\K\\C\\h\\d\\B\\P\\w","\\w\\K\\f\\k\\f\\e\\d\\P\\w","\\w\\l","\\m\\D\\r\\l\\m\\D\\e\\k\\l","\\m\\D\\O\\e\\l"];c g=x y();c v=0;c j=x y();z R(H){u(c b=0;b<H[a[2]][a[1]][a[0]];b++){c p=H[a[2]][a[1]][b];g[v]=p[a[4]][a[3]];u(c q=0;q<p[a[5]][a[0]];q++){A(p[a[5]][q][a[6]]==a[7]){j[v]=p[a[5]][q][a[8]];v++;18}}}}z X(){c n=x y(0);c o=x y(0);u(c b=0;b<j[a[0]];b++){A(!J(n,j[b])){n[a[0]]+=1;n[n[a[0]]-1]=j[b];o[a[0]]+=1;o[o[a[0]]-1]=g[b]}};g=o;j=n}z J(G,L){u(c t=0;t<G[a[0]];t++){A(G[t]==L){M 1b}};M Y}z 19(){c i=N[a[10]]((g[a[0]]-1)*N[a[9]]());c b=0;E[a[12]](a[11]);Z(b<g[a[0]]&&b<1c){E[a[12]](a[13]+j[i]+a[14]+g[i]+a[15]+g[i]+a[16]);A(i<g[a[0]]-1){i++}1a{i=0};b++};E[a[12]](a[17])}',62,75,'||||||||||_0x22c4|_0x6c56x6|var|x65|x6C|x74|relatedTitles|x72|_0x6c56x11|relatedUrls|x69|x3E|x3C|_0x6c56xa|_0x6c56xb|_0x6c56x7|_0x6c56x8|x61|x6E|_0x6c56xf|for|relatedTitlesNum|x22|new|Array|function|if|x66|x68|x2F|document|x6F|_0x6c56xd|_0x6c56x5|x64|contains|x20|_0x6c56xe|return|Math|x75|x3D|x67|related_results_labels|x6B|x77|x6D|x24|x79|removeRelatedDuplicates|false|while|||||||||break|rtmBacaJuga|else|true|jumlah'.split('|'),0,{}));

  //]]></script>

  <div class='rtmRelatedMiddle'>

    <b:if cond='data:post.labels'>

      <b:loop values='data:post.labels' var='label'>

        <b:if cond='data:view.isPost'>

          <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/>

        </b:if>

      </b:loop>

    </b:if>

    <span class='judul'><span>Baca Juga</span></span>

    <script> //<![CDATA[

      eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('L b=["\\i\\p\\e\\i\\a\\c\\K\\a\\c\\m\\d\\a\\h\\J\\i\\h\\h\\c\\a","\\p\\a\\d\\S\\c\\a\\s\\a\\e\\d\\j\\v\\r\\R\\c\\m\\j\\j\\t\\m\\s\\a","\\x\\n\\f\\j\\d\\y\\o\\f\\h\\r\\u\\o\\k\\Q\\u\\x\\n\\f\\j\\d\\y\\o\\f\\h\\r\\u\\n","\\P\\D\\a\\k\\r\\w\\a\\c\\a\\E\\d\\f\\k\\F\\c\\c","\\c\\a\\e\\p\\d\\G","\\e\\f\\h\\a\\t\\m\\s\\a","\\C","\\i\\e\\j\\a\\k\\d\\v\\a\\H\\f\\k\\a","\\n\\m\\k\\a\\e\\d\\t\\f\\h\\a","\\e\\a\\I\\d\\w\\i\\o\\c\\i\\e\\p"];O();(N(){A q=z[b[1]](b[0])[0];B(q){A g=z[b[3]](b[2]),l=M(g[b[4]]/2);B(g[l][b[5]]==b[6]){g[l][b[8]][b[7]](q,g[l])}T{g[l][b[8]][b[7]](q,g[l][b[9]])}}})()',56,56,'||||||||||x65|_0x9301|x6C|x74|x6E|x6F|_0xa209x2|x64|x69|x73|x72|_0xa209x3|x61|x70|x62|x67|_0xa209x1|x79|x6D|x4E|x20|x42|x53|x2E|x2D|document|let|if|x50|x75|x63|x41|x68|x66|x78|x4D|x52|var|parseInt|function|rtmBacaJuga|x71|x2C|x43|x45|else'.split('|'),0,{}));

    //]]> </script>

  </div>

</b:if>

Keterangan:

var jumlah = 4 adalah jumlah artikel terkait yang dimunculkan dan bisa diganti sesuka hati. Pastikan hanya mengubah angkanya saja.

2. Pasang Kode CSS

Untuk desain tampilan yang berbeda, Agar tampilannya tidak membosankan, tambahkan kode CSS ini dan simpan DI ATAS kode </style> atau ]]></b:skin>

/* Related Posts Middle */

.rtmRelatedMiddle {background-color:#f5f5f5; border:1px solid #e5e5e5; display:block; margin:20px 0px; padding:10px 20px;}

.rtmRelatedMiddle .judul {color:#f44336; font-size:120%; font-weight:600; text-transform:uppercase}

.rtmRelatedMiddle ul {margin:10px 0px 0px !important; padding:0px !important;}

.rtmRelatedMiddle ul li {list-style:none; padding:5px 0px !important; border-bottom:2px dotted #aaa !important; text-align:left !important; line-height:1.25em !important;}

.rtmRelatedMiddle ul li:first-child {padding-top:0px; !important;}

.rtmRelatedMiddle ul li:last-child {padding-bottom:0px !important; border:0px !important}

.rtmRelatedMiddle ul li a:before{content:''; display:inline-block; width:17px; height:17px; margin-right:3px; vertical-align:-3px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23333'/%3E%3C/svg%3E") center / 20px no-repeat;}

Jangan lupa,  simpan template dan lihat hasilnya. Keberadaan artikel terkait di tengah postingan sangat penting untuk menurunkan bounce rate dan memancing pengunjung agar mau membaca artikel lain.

Memang sih, ngagokan atau sedikit mengganggu, namun karena hampir semua situs berita memasang related post di tengah postingan, maka pembaca pun akan terbiasa. Wasalam.*