Kamis, 09 Desember 2010

Membuat Related Post / Artikel Terkait di Sidebar

widgeo.net
Bagaimana cara membuat artikel terkait atau related posts di sidebar. Di blog ini, muncul setelah Anda msuk ke salah satu postingan pada gadget berjudul, Silahkan Anda Baca. Nah, tutorial ini berbeda dari cara membuat artikel terkait di bawah postingan. Untuk membuat artikel terkait atau related posts syarat utamanya adalah postingan Anda harus mempunyai label, karena penampilan otomatis artikel yang berkaitan didasarkan pada label yang sama.


Instalasi Script
1. Login blogger
2. Tata Letak
3. Edit HTML
4. Centang Expand Template Widget
5. Letakkan kode berwarna biru berikut di atas </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 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: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. Jadi bisa ditampilkan hanya 7, atau bisa juga hingga 15 jika postingan Anda memiliki lebih dari satu label.

7. Simpan Template Anda.

Penempatan Gadget
Sekarang beralihlah ke bagian Tata Letak. Pilih dimana gadget akan ditambahkan. Klik Add Gadget. Pilih HTML/JavaScript.

Lalu masukkan kode berikut ini di gadget Anda.


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


Tidak ada komentar:

Posting Komentar