Membuat Related Post atau Artikel Terkait dengan Mudah

Fungsi related post atau posting terkait atau artikel yang berhubungan bisa dibilang penting. Dengan ini pengunjung bisa dengan mudah menemukan informasi lain yang masih ada hubungannya dengan artikel yang sedang ia dibaca.

Keuntungan lain adalah kita bisa ‘mempromosikan’ artikel-artikel lama. Jika halaman blog diibaratkan toko, maka related post ini etalasenya.

Oke, langsung saja ke tutorialnya berikut ini:

1. Login ke blog anda

2. Masuk menu 'Layout-->Edit HTML'


3. Centang kotak 'Expand Widgets Template'

4. Cari kode ini <data:post.body/>

5. Letakkan script berikut ini di bawah kode <data:post.body/> tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

6. Simpan. Selesai.

7. Jika blog anda telah memiliki read more, yang memakai tutorial dari saya maka kode <data:post.body/> akan terlihat ada dua, maka taruhlah kode diatas tepat dibawah kode read more anda. yaitu dibawah kode

<b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); </script> <span class='rmlink' style='float:right;padding-top:20px;'> <a expr:href='data:post.url'>&#187;&#187;&#160;&#160;read more</a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> </b:if>

Bila tidak memakai read more dari blog ini silahkan cari kode sejenis dari yang diatas.

Anda bisa mengganti tulisan 'Related Post' dengan kalimat lain misalnya 'posting terkait', 'artikel terkait', dll. Kalau di blog saya tulisannya 'Baca Juga Postingan Lainnya'

Contoh hasil bisa dilihat dibawah ini!!

Manambahkan Scroll Pada Related Post Atau Artikel Terkait
1. Perhatikan Kode yang saya arsir dengan warna merah diatas, ganti dengan code dibawah ini!!

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<h3>Related Post</h3>
<div class='terkait'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='data2007'/>

2. Selanjutnya cari kode ]]></b:skin>
3. JIka sudah ketemu copy dan pastekan code berikut diatas code ]]></b:skin> tadi.

.terkait{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.terkait:hover{background-color: rgb(255, 255, 255);}

Maka hasilnya Akan terlihat seperti ini!!

Selamat mencoba.