Membuat Related Post di Blog

Membuat Related Post atau Tulisan Terkait kalau di Wordpress sebenarnya tidak sulit karena sudah ada pluginnya yang mudah ditambahkan disana. sedangkan di blogger tidak demikian sehingga mengharuskan kita untuk menambahkan sendiri scriptnya. Fungsi dari Related Post ini tentu disamping memudahkan pengunjung mencari informasi apa yang berhubungan dengan tulisan yang sedang dibaca, juga cukup membantu dalam mempromosikan tulisan-tulisan lainnya yang mungkin sudah lama diposting.

Sebenarnya sudah banyak sih teman-teman dan para blogger yang membuat tutorialnya, tapi, tidak salah juga kan kalau saya juga ikut menulisnya sendiri. (hehehe...) dan untuk kali ini yang saya tulis adalah Related Post tanpa Thumbnail.. jadi yang muncul cuma judul posting tanpa gambar. (kalau mau tahu hasilnya, lihat di bawah postingan ini yang ada tulisan BACA TERKAIT.

nah, berikut cara-caranya:

1. seperti biasa masuk layout lalu edit HTML. jangan lupa centang kotak "Expand widget Templates". atau kalau perlu download dulu template yang sedang dipakai sebagai back up kalau terjadi apa-apa. ;)

2. temukan kode ini: </head>

3. copy paste kode berikut ini dan letakkan tepat di atas kode tadi (</head>):

<style>

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://www.dogphilosophy.net/graphics/sample1.jpg") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>

<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>


4. Kemudian cari kode ini: <p><data:post.body/></p>

5. Lalu copy paste kode berikut setelah kode di atas:

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Related Posts on <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><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=10&quot;' type='text/javascript'/></b:if></b:loop> </h2>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>

</div></b:if>

6. oke. Save dan lihat hasilnya.

oia, untuk kode yang ditandai merah dalam pada no. 5, bisa diubah sesuai yang diinginkan. Related Post on bisa diganti dengan nama lain serta angka 10 untuk berapa banyak jumlah posting yang ingin dumunculkan per label/kategorinya.

Selamat mencoba !!