Cara Membuat Related Post di Tengah Postingan Blog

Umumnya widget Related Post ada di bawah postingan, bisa langsung di akhir alinea penutup, bisa juga di bawah tombol share media sosial.

Kode berikut yang BP "intip" dan modif dari Related Post ala MagOne Blogger Template yang menampilkan posting terkait di awal postingan.

Di bawah ini cara menampilkan tulisan terkait di tengah, yakni setelah alinea ketiga. Biasanya related post di tengah posting blog ini ada di situs-situs berita.

Ini penampakannya:

Cara Membuat Related Post di Tengah Postingan

1. Simpan Kode berikut ini, tepat 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>

2. Ganti kode <data:post.body/> yang kedua dengan kode berikut ini:

<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='related-post'>
<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=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Related Posts</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id'>
<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>

 3. Simpan kode berikut ini, di atas kode </style> atau ]]></b:skin>

/* Related Post Inside Blog Posts */
.related-post {position: relative;background: #fff;padding: 0;margin: 10px 15px 8px 0;float: left;width: 50%;border: 1px solid #999;}
.related-post h4{background:#666 !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:none;color:#fff !important}
.related-post ul {margin:0;padding:0}
.related-post 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}
.related-post ul li:last-child{border:none !important}
.related-post a {color:#1b71bc;font-size:13px !important}
.related-post a:hover {text-decoration:underline}

Catatan
1. Kode #fff merupakan warna latar putih, bisa diganti
2. Kode width:50% menampilkan widget related post within blog post setengah area. Jika ingin tampil full, bisa diubah menjadi 100%.

Demikian cara membuat Related Post di Tengah Postingan Blog.