Cara Menampilkan Posting Yang Berkalitan (Related Posts) Vers. 1


Banyak cara untuk memberikan variasi dalam halalam utama blog kita, terutama dihalaman postingan. Misalnya dengan memberikan Related Posts atau biasa disebut "link yang bekaitan", "artikel pada kategori yang sama", "artikel yang bertautan", "postingan terkait" atau apa aja namanya, dimana memberikan kemudahan kepada pengunjung untuk mencari artikel atau postingan yang berkaitan dengan artikel atau postingan yang ada. Biasanya Related Posts dipasang ditampilkan dibawah postingan tunggal tepatnya di bawah kolom komentar. Kelebihan dan keuntungan dengan pemasangan post yang berkaitan tentu saja akan mempermudah pengunjung blog kita untuk menemukan artikel terkait tanpa harus menuju dan membuka satu persatu halaman dalam link label.

Tanpa banyak basa-basi mari kita bahas masalah tersebut secara jelas sehingga akan mempermudah kawan-kawan blogger untuk mekukan hal tersebut. Bagaimana? Langsung aja ke proses pemasangan yang sangat gampang.

Langkah I:

Masuk pada Template -> Edit HTML -> kemudian masukan kode javascript dibawah ini diantara kode <head>..</head> atau lebih mudahnya cari kode </head> saja, kemudian letakan kodenya diatas kode </head> -> jangan lupa disimpan.

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

Langkah II:

Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Widget Template -> cari kode dibawah ini.
     <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 != "true"'>,</b:if>
          </b:loop>
        </b:if>

Jika sudah ketemu, masukan kode berwarna Biru dibawah diantara kode diatas.

     <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 != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
          </b:loop>
        </b:if>

Pada proses ini pengeditan pada kode HTML sudah selesai, Jangan lupa disimpan

Langkah III:

Masuk pada Template -> Elemen halaman -> kemudian buat elemet baru atau klik "Tambahkan sebuah Elemen Halaman" -> copy-paste kode dibawah ini dan jangan lupa memberikan nama judul misal, "Artikel pada kategori yang sama" -> kemudian jangan lupa disimpan.
<script type="text/javascript">
 removeRelatedDuplicates();
 printRelatedLabels();
</script>

Langkah IV:

Agar related post ini tidak tampil pada halaman utama dan hanya tampil pada halaman posting tunggal maka kita perlu penambahan beberapa kode, caranya:

Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Widget Template -> cari kode dibawah ini, sebisanya cari sesuai dengan title yang kita masukan, sebagai contoh, tadi saya memberi mana dengan Artikel pada kategori yang sama, jika sudah ditemukan masukan ke dua kode berwarna Biru dibawah.

Catatan: dibawah ini ada kode HTML13 ini jangan dijadikan patokan pencarian, sebaiknya abaikan saja karena setiap elemen pasti berbeda-beda, cukup cari title saja.
<b:widget id='HTML13' locked='false' title='Artikel pada kategori yang sama' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
    <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>

Peringatan: Template baru Anda tidak berisi widget berikut:
• HTML15
Ingin mempertahankan widget ini di blog Anda atau menghapusnya?
Penghapusan widget tidak dapat diurungkan.

Selamat mencoba ya...................
Sumber: o-om

Related Articles :


Stumble
Delicious
Technorati
Twitter
Facebook

0 komentar:

Posting Komentar

Related Posts Plugin for WordPress, Blogger...

Software

ENTER-TAB2-CONTENT-HERE

News

ENTER-TAB3-CONTENT-HERE
 

Free Unlimited Information Copyright © 2010 Premium Wordpress Themes | Website Templates | Blogger Template is Designed by Lasantha.