Cara Menambah Related Post Artikel Terkait pada artikel blog

Sehubungan ada sohib yang subuh-subuh sudah sms nanyain tentang bagaimana cara bikin Related Post (Artikel Terkait), akhirnya harus nulis juga mengenai Related Post ini meski baru aja semalam aku curat-coret di blog ini. Ga pa pa kan? Demi sohib dan kamu semua aku rela mati (baca: makan timbel) deh, hehehe...

Sebenarnya apabila kita searching mengenai Related Post ini maka akan muncul puluhan tulisan seputarnya, baik yang dalam bahasa asing maupun bahasa kita (sayang blum ada dalam bahasa sunda unk). Tapi kalo kamu males “kakaratak” and milih-milih artikel yang pas, baca aja tulisan ini, mudah-mudahan bisa kamu terima dengan suka cita dan lapang dada, hehehe...

Fungsi Related Post adalah untuk menunjukkan artikel-artikel yang berhubungan dengan suatu kategori atau label dari sebuah tulisan. Dengan adanya Related Post ini, si pembaca dapat langsung melihat artikel terkait sehingga bisa langsung meg-klik-nya tanpa harus membuka-buka Blog Archieves.

Untuk menambahkan Related Post dalam blog, kamu bisa mengikuti langkah-langkah berikut :

• Login terlebih dahulu ke akun blogger kamu.
• Dari halaman Dashboard klik Tata Letak dan pilih Edit HTML.
• Kemudian centrang pada Expand Template Widget.
• Carilah kode <data:post.body/> (gunakan Control F atau F3).
• Letakkan kode script berikut di bawahnya:
  

  <!-- Mulai Related Post -->
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div style='margin-top:20px; padding:0px 10px; border:2px solid #CCC'>
  <div class='related-posts'>
  
  <div class='widget-content'>
  <h4>Artikel terkait dengan kategori ini:</h4>
  <div id='datablogku' style='margin:10px 0px 10px 0px'/>
  
  <script type='text/javascript'>
  var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
  var maxNumberOfPostsPerLabel = 4;
  var maxNumberOfLabels = 10;
  
  maxNumberOfPostsPerLabel = 100;
  maxNumberOfLabels = 3;
  
  function listEntries10(json) {
  var ul = document.createElement(&#39;ul&#39;);
  var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
  json.feed.entry.length : maxNumberOfPostsPerLabel;
  for (var i = 0; i &lt; maxPosts; i++) {
  var entry = json.feed.entry[i];
  var alturl;
  
  for (var k = 0; k &lt; entry.link.length; k++) {
  if (entry.link[k].rel == &#39;alternate&#39;) {
  alturl = entry.link[k].href;
  break;
  }
  }
  var li = document.createElement(&#39;li&#39;);
  var a = document.createElement(&#39;a&#39;);
  a.href = alturl;
  
  if(a.href!=location.href) {
  var txt = document.createTextNode(entry.title.$t);
  a.appendChild(txt);
  li.appendChild(a);
  ul.appendChild(li);
  }
  }
  for (var l = 0; l &lt; json.feed.link.length; l++) {
  if (json.feed.link[l].rel == &#39;alternate&#39;) {
  var raw = json.feed.link[l].href;
  var label = raw.substr(homeUrl3.length+13);
  var k;
  for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
  var txt = document.createTextNode(label);
  var h = document.createElement(&#39;b&#39;);
  h.appendChild(txt);
  var div1 = document.createElement(&#39;div&#39;);
  div1.appendChild(h);
  div1.appendChild(ul);
  document.getElementById(&#39;datablogku&#39;).appendChild(div1);
  }
  }
  }
  function search10(query, label) {
  
  var script = document.createElement(&#39;script&#39;);
  script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
  + label +
  &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
  script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
  document.documentElement.firstChild.appendChild(script);
  }
  
  var labelArray = new Array();
  var numLabel = 0;
  
  <b:loop values='data:posts' var='post'>
  <b:loop values='data:post.labels' var='label'>
  textLabel = &quot;<data:label.name/>&quot;;
  
  var test = 0;
  for (var i = 0; i &lt; labelArray.length; i++)
  if (labelArray[i] == textLabel) test = 1;
  if (test == 0) {
  labelArray.push(textLabel);
  var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
  labelArray.length : maxNumberOfLabels;
  if (numLabel &lt; maxLabels) {
  search10(homeUrl3, textLabel);
  numLabel++;
  }
  }
  </b:loop></b:loop>
  </script>
  </div></div>
  <!-- Terimakasih karena anda tidak menghapus link ini -->
  <div style='font-size:85%; float:right; margin-top:3px;'><a href='http://ruangsc.blogspot.com/2009/06/menampilkan-related-post-artikel.html' target='_blank' title='Cara membuat Related Post'>Widget by SC Community</a>
  </div></div>
  </b:if>
  <!-- Akhir Related Post -->

  
  
  Catatan:
  

  » Ukuran yang diberi warna merah bisa kamu ubah.
  » Jika kamu sudah menggunakan script Readmore ini, letakkan kode tersebut di bawah <data:post.body/> yang pertama (paling atas). Jika berbeda, kamu bisa mencobanya di bawah <data:post.body/> yang kedua (paling bawah).
  » Jika kamu sudah menambahkan Icons Social Bookmarking atau Addthis Sharing Tools, letakkan kode tersebut dibawah script Icons Social Bookmark atau Addthis Sharing Tools.

• Simpan hasil edit kamu dan ucapkan Alhamdulillah....

Mudah kan? Nah, sekarang kamu tinggal melihat hasilnya.
Selamat mencoba...