Membuat Artikel Terkait atau Related Post di Sidebar

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.

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 Anda lebih dari 15.

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



Lalu masukkan kode berikut ini di gadget Anda.

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

Agar tampilan related post tidak tampil di homepage dan pencarian label Anda harus menambah sedikit kode. caranya sebagai berikut;
Cari kira-kira seperti ini;


<b:widget id='HTML2' locked='false' title='Related Post' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>  


Ganti dengan kode berikut;

<b:widget id='HTML2' locked='false' title='Related Post' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>  


Warna merah adalah kode yang ditambahkan agar supaya artikel terkait tidak tampil di homepage/pencarian label.

Begitulah tutorial artikel terkait atau related posts di Sidebar. Ini akan membantu meningkatkan page view blog Anda. Semoga bermanfaat.
Daftar Isi Lengkap di sini «« klik disini.

Tidak ada komentar:

Posting Komentar