Cara Menampilkan Artikel Terkait Dibawah Postingan Blogspot

Cara Menampilkan Artikel Terkait Dibawah Postingan Blogspot

Mungkin diantara anda ada yang belum tau cara menambahkan daftar related post atau related artcle atau Artikel terkait di blogspot. Caranya sebenarnya banyak, yaitu dengan widget, dengan linkwithin,dengan script. Nah kalini saya akan menampilkan postingan cara menampilkan artikel terkait dibawah postingan blogspot dengan cara javascript.

Berikut adalah bagaimana kita dapat menambahkan fungsi sederhana ini untuk template Blogger:

 

1. Pergi ke Layout> Edit HTML di dashboard Blogger Anda, dan centang kotak "Expand widget template".

2. Sisipkan bagian kode berikut tepat sebelum tag  </head>:


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

3. Berikutnya, cari bagian kode ini dalam template Anda:


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

 

Hal ini biasanya terletak di bagian "footer-post" dari template Anda (di widget Blog1), meskipun template Anda mungkin berbeda.

 

Ganti kode diatas  dengan kode berikut sebagai gantinya:


<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&callback=related_results_labels&max-results=10″' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

 

Kode JavaScript tersebut  diperlukan untuk mengurai label dari feed blog kita.

 

4. Terakhir : cari baris ini di template Anda:
<p><data:post.body/></p>

Dibawah baris  tsb, sisipkan bagian kode berikut:

<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

 

Kemudian simpan template Anda.

Jika tidakada masalah, maka  ketika Anda melihat sebuah posting di halaman posting, Anda akan melihat sebuah daftar sederhana dari posting terkait yang akan muncul sebelum bagian komentar. Daftar ini akan ditata sesuai dengan daftar elemen lain dalam posting Anda, dan secara otomatis menyesuaikan untuk melengkapi template Anda.

Semoga bermanfaat