02 November 2011

Membuat Related Post atau Artikel Terkait di Sidebar

Untuk membuat artikel terkait atau related posts syarat utamanya adalah postingan Sampeyan harus mempunyai label, karena penampilan otomatis artikel yang berkaitan didasarkan pada label yang sama.

Langkah Cara Membuat Related Post di Sidebar, silahkan ikuti langkah-langkah berikut :
  • Login ke Blogger.
  • Pilih Rancangan.
  • Pilih Edit HTML
  • Beri tanda centang pada Expand Template Widget.
Letakkan  kode berikut diatas </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>
 

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

Simpan template

Keterangan:
Pada yang berwarna biru max-result menunjukkan maksimal artikel terkait yang akan ditampilkan per label. Jadi bisa ditampilkan hanya 5, atau bisa juga hingga 15 jika setiap lebel postingan Sampeyan lebih dari 15.

Penempatan Gadget
Sekarang beralihlah ke bagian Rancangan --> Elemen Halaman. Pilih  gadget akan ditambahkan. Klik Tambah Gadget. Pilih HTML/JavaScript.



Lalu masukkan kode berikut ini di gadget Sampeyan.

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

Begitulah Tutorial Artikel Terkait atau Related Posts di Sidebar. Ini akan membantu meningkatkan page view blog Sampeyan. Semoga bermanfaat.


Pengelola Blog

Zainoel Arifin Isa'i : Penulis Blog. Ketika aku tidak nongkrong di warung kopi atau menyusuri hutan atau juga mendaki gunung, aku sibuk menjadi tukang desain lepas yang bermarkas di sudut kamar belakang rumah di daerah pelosok desa terpencil lereng Gunung Arjuno.
Machfudz Arif : Teknisi Blog. Pekerjaan sebagai Web and Mobile App Developer yang bermarkas di Lembah Tlogo Krabyaan di sebuah dusun yang dikelilingi perbukitan nan elok dan berudara segar.

2 comments:

  1. Salam kenal + nice post, mohon kunbalnya karna saya kira juga menulis dengan tema yang sama yaitu MEMBUAT RELATED POST / ARTIKEL TERKAIT

    Thanks Salam Blogger

    ReplyDelete
  2. Saya baru belajar Blog.tapi saya bingung itu kode HTML maksudnya gmana??

    ReplyDelete

Berkomentarlah yang bijak, iklan/spam langsung dihapus