Cara Membuat Related Post di Tengah Postingan Blog

Baca Juga

Related post adalah widget dalam postingan blog yang muncul di bagian akhir tulisan. Berisi daftar judul --ada juga yang plus gambar thumbnail, Artikel Terkait ini bagus buat SEO dan meningkatkan pageviews.

Selain di bawah postingan blog, retated post juga bisa dimunculkan di tengah postingan, bahkan plus iklan, seperti dalam tutorial berikut ini.

Related Post di Tengah Postingan Blog ini biasanya dikasih teks "Baca Juga" di atasnya. Kita sudah familiar dengan artikel terkait "Baca Juga" ini di situs-situs berita atau website ternama. Ini penampakannya:

Baiklah, kita langsung saja ke cara memasang kode-kodenya. 

Cara Membuat Related Post di Tengah Postingan Blog

1. Klik Tema (Theme)

2. Klik Edit HTML

3. Simpan atau copas kode CSS related post di tengah postingan blog berikut ini di atas kode </head>

<b:if cond='data:view.isPost'>
<style>
.related-middlepost{background:#f1f1f1 none repeat scroll 0 0;margin:30px auto;padding:35px 15px 5px;position:relative;clear:both}
.related-middlepost h4{color:#c00;font-size:15px;font-weight:700;left:23px;margin:0;position:absolute;text-transform:uppercase;top:10px}
.related-middlepost ul{margin:0!important;padding:0!important}
.related-middlepost ul li{border-bottom:1px solid #e3e3e3;font-size:15px;font-weight:700;margin:auto;padding:10px 0 10px 10px;position:relative;transition:all 0.3s ease 0s;list-style:disc inside}
.related-middlepost a{color:#1958df}
.related-middlepost a:hover{color:#c00}
.related-middlepost ul li:nth-child(n+4){display:none}
.related-middlepost ul li:nth-child(3){border-bottom:medium none}
.related-middlepost ul li:before {display:none}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedmiddle = new Array(); var relatedmiddleNum = 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]; relatedmiddle[relatedmiddleNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedmiddleNum] = entry.link[k].href; relatedmiddleNum++; 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] = relatedmiddle[i];}} relatedmiddle = 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((relatedmiddle.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedmiddle.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedmiddle[r] + '</a></li>'); if (r < relatedmiddle.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>

4. Cari (Ctrl+F) kode <data:post.body/> dan hapus! Jika ada dua kode, hapus kode <data:post.body/> yang kedua.

5. Ganti (replace) kode <data:post.body/> yang sudah dihapus tadi dengan kode berikut ini:

<div expr:id='&quot;post1&quot; + data:post.id'/>
<b:if cond='data:view.isPost'>
<div class='related-middlepost'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<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:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div style='margin:15px 0'>
<!-- Iklan AdSense -->
</div>
</b:if>
<div expr:id='&quot;post2&quot; + data:post.id'>
<data:post.body/>
</div>
<b:if cond='data:view.isPost'>
<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/1.5);
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>
</b:if>

Catatan: Anda bisa sisipkan juga iklan/AdSense di bawah kode <!-- Iklan AdSense -->.

6. Simpan! Save.

Silakan cek salah satu postingan blog Anda. Pastikan minimal ada 5 tulisan dengan Label yang sama agar Artikel Terkait di tengah ini muncul di halaman postingan blog Anda.

Demikian Cara Membuat Related Post di Tengah Postingan Blog. Di blog.romeltea.com ini saya tidak pasang, karena sudah ada dua related post di bagian bawah. Semoga berhasil!

Sumber