Cara Membuat Related Post Otomatis Postingan Blog

Related post atau Artikel terkait merupakan salah satu element penting yang dapat diterapkan dalam setiap postingan Blog. Dengan adanya filture ini maka semua postingan yang telah dipublikasikan saling terkait satu sama lain. Dan dengan adanya filture ini juga membuat peluang besar pembaca semakin berlama-lama ketika berkunjung ke blog kita. Tidak menutup kemungkinan ketika visitor mengunjungi blog kita pada suatu postingan yang sesuai dengan kebutuhannya, akan merasa tertarik membaca postingan lain yang Judulnya disuguhkan dalam Related Post. 

Alhasil jumlah kunjungan postingan menjadi meningkat secara perlahan, berkat adanya filture Related Post ini. Berikut ini contoh dari menu Related Post dengan judul penawaran "Baca Juga" 


Bagi kalian yang merasa tertarik menerapkan menu Related Post ini dapat mengikuti step by step berikut ini, namun sebelumnya silahkan dowload terlebih dahulu SOURCE CODE RELATED POST

Buka Halaman Dasboard Blogger, pilih Tema kemudian pilih Edit HTML. Cari kode </head> agar lebih mudah gunakan filture pencarian dengan menekan tombol kombinasi keyboard CTRL + F. 
Pastekan kode Script Font Awesome tepat di atasnya

 
 <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <script type='text/javascript'>
 //<![CDATA[
 var relatedSimply = new Array(); var relatedSimplyNum = 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]; relatedSimply[relatedSimplyNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedSimplyNum] = entry.link[k].href; relatedSimplyNum++; 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] = relatedSimply[i];}} relatedSimply = 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((relatedSimply.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedSimply.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedSimply[r] + '</a></li>'); if (r < relatedSimply.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
 //]]>
 </script>
 </b:if>

Cari dan ganti kode

 
  <data:post.body/>

Pada Tab Kondisional Postingan, Bisanya terdapat lebih dari satu, terapkan pada area code

 
  <b:if cond='data:view.isPost'> … </b:if> atau <b:if cond='data:blog.pageType == "item"'> … </b:if>

Penempatan kode ini terkadang berbeda antara satu template dengan template yang lain, maka dari itu silahkan kalian coba satu persatu.

 
<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-simplify'>
<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'><p><data:post.body/></p></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/2);
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>

Cari kode

 
  </style> atau kode ]]></b:skin> 

pastekan kode berikut ini tepat di atasnya

 
  /* Related Post Style 1 */
.related-simplify{position:relative;padding:0;margin:15px auto;width:100%;}
.related-simplify h4{background:#3498db;padding:8px 12px;margin:0;font-size:15px;font-weight:400;color:#fff;border:1px solid #2e88c5}
.related-simplify ul{margin:0;padding:0}
.related-simplify ul li{background:#f6f6f6;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border:1px solid rgba(0,0,0,0.1);border-bottom:0;transition:all .3s}
.related-simplify ul li:nth-child(odd){background:#fefefe}
.related-simplify ul li:last-child{border-bottom:1px solid rgba(0,0,0,0.1)}
.related-simplify ul li:before{content:'\f138';font-family:fontawesome;position:absolute;margin:0 9px 0 4px;color:#2ecc71;overflow:hidden;transition:all .3s}
.related-simplify ul li:hover:before{content:'\f138';font-family:fontawesome;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
.related-simplify a{color:#0383d9;font-size:13px;margin:0 0 0 30px;}
.related-simplify a:hover{color:#0383d9;text-decoration:underline}
.related-simplify ul li:nth-child(n+4) {display:none;}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Langkah Terakhir Klick Simpan Tema
Sekarang coba kalian akses salah satu postingan blog kalian, apakah menu Related Post sudah berhasil diterapkan. 

Demikianlah Tutorial Cara Membuat Menu Related Post Otomtasi pada setiap halaman postingan Blog. Terima kasih telah menyimak tutorial ini sampai dengan selesai.