Monday, June 14, 2010

Membuat related post / artikel terkait

Related post / artikel terkait sangat dibutuhkan bagi suatu blog, karena dengan menampilkan related post/ artikel terkait, pengunjung akan lebih mudah untuk mencari artikel lainnya di blog Sobat. Ada syarat yang perlu diketahui dalam pembuatan related post / artikel terkait. Related post ini akan muncul berdasarkan label artikel yang sama, jadi jika artikel yang tidak diberi label, tidak akan muncul related postnya. Oia sebelumnya zoel juga sudah membuat artikel tentang related post selain link within (dengan gambar/thumbnail).



Langkah membuat related post/artikel terkait sebagai berikut

:
1. Login blogger
2. Layout
3. Edit HTML
4. download template dulu sebagai backup
5. Centang expand widget template
6.  Letakkan code di bawah ini di atas code </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>
7. kemudian cari code 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:loop>
  </b:if>
ganti dengan


<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>
Pada yang berwarna merah max-result menunjukkan maksimal artikel terkait yang akan ditampilkan per label.

8. save

Yang terakhir tinggal pilih untuk penyimpanan related post.
Zoel kasih contoh kalau Sobat ingin menyimpannya di sidebar:
Sobat tinggal masuk ke layout-page elements-add gadget-selanjutnya pilih HTML/javascript seperti gambar di bawah:

add a gadget

Setelah tampil halaman HTML/javascript, copi paste code di bawah:
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
Happy blogging...

No comments:

Post a Comment