Membuat Related Post Widget Blog

Cukup lama aku mencari cara gimana membuat Related Post atau Artikel Terkait di blog. Namun dari kebanyakan tutorial yang aku baca, nggak ada yang sesuai dengan template yang aku gunakan. Akhirnya aku menemukan sebuah artikel Membuat Related Post Di Widget Blog di situs Belajar Ngeblog, cara ini pas banget ama template aku. Akhirnya aku copy dan aku paste ke blog aku ini dengan sedikit modifikasi.

Hal ini aku lakukan bukan dengan tujuan mencontek karya orang lain, namun juga semata-mata untuk menjadi bahan belajar buat aku dan bagi teman-teman yang sempat bertandang ke blog aku, atau pula bagi yang kesulitan menemukan cara membuat related post.

Ok, langsung aja kita mulai tutorialnya.

Login ke akun blogger anda, pilih blog yang ingin anda edit, klik link Layout kemudian masuk ke Edit HTML
Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.
Masukkan kode script berikut sesudah tag <head> dan sebelum tag </head> seperti dibawah ini:

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

Kemudian cari kode widget seperti dibawah ini

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

Pada Script diatas, tambahkan script yang dicetak tebal berwarna biru seperti dibawah ini

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;
max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Save template
kemudian buka Layout -> Page Elements dan add a new HTML/Javascript widget. beri judul atau title Title Related Post. kemudian copy paste script di bawah ini pada kotak yg disediakan :

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

Sekarang kembali lagi ke Layout -> Edit HTML, centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan, kemudian cari HTML/Javascript widget Related Post yang kita add. Tambahkan baris yang berwarna biru seperti dibawah ini :

<b:widget id='HTML13' locked='false' title='Related Post' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Klik Save.
Terakhir, kembali lagi ke menu Layout, Drag (klik dan geser) widget related post yang kita buat tadi tepat di bawah widget posting. Hal ini kamu lakukan bila kamu menginginkan related post tersebut muncul di bagian bawah setiap posting/artikel yang kamu buat. Namun jika kamu lebih senang menampilkannya pada sidebar, kamu tidak perlu melakukan langkah terakhir ini.

Comments