Membuat related post pada sidebar blogger

Cara membuat related post atau artikel terkait ada yang di tempatkan dibagian bawah halaman posting dan juga ada yang di tempatkan di side bar halaman sebagai widget. Related post atau artikel terkait ini memiliki peranan yang cukup penting dalam memudahkan pembaca menemukan apa yang mereka butuhkan dan berkaitan dengan apa yang sedang mereka baca. Untuk itu, pada panduan kali ini Saya akan mencoba share pengetahuan yang pernah Saya pelajari tentang bagaimana membuat related post atau membuat artikel terkait di blogspot yang kita miliki dan yang Saya share kali ini adalah menempatkan related post pada sidebar blog kita,

Baiklah, sekarang langsung saja ikuti panduan dan tutorial berikut ini:

1. Login menggunakan Username dan Password google account atau gmail Anda di blogger.com

2. Dari halaman dasbor/dashboard, pilih dan klik Design atau Rancangan.

3. Klik Edit HTML dan tandai Expand Widget Template (sebaiknya download dulu template Anda sebagai backup)

4. Copy kode dibawah ini dan letakan di template Anda 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>

5. Cari kode widget seperti dibawah ini (gunakan CTRL+F menggunakan firefox):

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

6. Setelah ketemu, ganti kode tersebut dengan kode berikut:

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

Angka max-results yg berwarna kuning adalah jumlah related post yang akan di tampilkan dan bisa Anda ganti dengan angka yang Anda inginkan.

7. Save template

8. Kemudian klik Page Elements dan add a new HTML/Javascript widget pada posisi yang Anda suka. Beri judul Related Post pada Tiltle . kemudian copy paste script di bawah ini pada kotak yg disediakan:

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

9. Save dan lihat hasilnya dengan meng-klik salah satu judul blog Anda.
Selamat widget related post atau artikel terkait blog Anda di sidebar sudah jadi.

Sumber: Blogger Group