Cara Membuat Artikel Terkait (Related Post) Di Sidebar

Cara Membuat Artikel Terkait (Related Post) Di Sidebar - Dihari yang cerah ini, admin mau coba share tutorial Cara Membuat Artikel Terkait (Related  Post) Di Sidebar. Mungkin sudah banyak yang membahas tentang artikel, namun tidak ada salahnya dong kita bahas sekarang. Related Post atau bisa diartikan artikel terkait yang muncul sesuai dengan label/kategori postingan blog kita.

Artikel Terkait Sidebar

Lalu bagaimana cara membuat nya ?
Berikut langkah-langkah membuatnya:

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berikut: </head> (gunakan Ctrl+F di keyboard ),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode </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>

6. Kemudian cari 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 != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>

7. Kemudian ganti kode diatas dengan kode berikut 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 != &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>
</b:if>

---

max-results=10 : adalah jumlah artikel terkait yang akan ditampilkan, silahkan diganti sesuai dengan kebutuhan.

8. Simpan Template, dan lanjut ke langkah berikut ini

9. Next, masuk ke Page Element > Add a Gadget > HTML/JavaScript > lalu copy paste kode dibawah ini kedalam konten HTML/JavaScript.

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

10. Simpan dan lihatlah hasilnya.

---

Baca :  Fungsi Kode untuk mengatur tampilan blog untuk dapat menampilkan related post hanya pada postingan blog.

---