Membuat Related Post Di Sidebar

Sama halnya seperti Related Post (Postingan Terkait) buatan Linkwithin cuma kali ini tanpa menggunakan pihak 3 alias Related Post buatan sendiri dan juga widget ini digunakan sebagai gadget yang bisa ditaruh di sisi kanan blog. Widget ini merupakan salah satu teknik SEO untuk bisa membuat pengunjung
betah di blog sobat karena widget ini membantu pengunjung untuk mengetahui postingan artikel terkait dari postingan artikel yang sedang dibaca pengunjung blog.

Cara Pemasangan :

• Login ke blog sobat...


• Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.
  
  
  


• Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode </Head> tersebut.
  
  
  <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>

  
  

  
  
  - Keterangan :
  • not available.


• Cari kode yang mirip dengan kode di bawah 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 != &quot;true&quot;'>,</b:if>
  </b:loop>
  </b:if>
  
  kemudian ganti dengan kode di bawah 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 != &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>
  
  Catatan :
  max-results=10 adalah jumlah related post yang ditampilkan.


• Klik "Save" untuk menyimpan template.


• Klik "Design" ==> "Page Elements" ==> "Add a Gadget", kemudian pilih "HTML/Java Script".


• Copy-paste kode di bawah ini pada kotak gadget.
  
  
  <script type="text/javascript">
  removeRelatedDuplicates();
  printRelatedLabels();
  </script>


• Tuliskan "Related Post" untuk judul gadget.


• Klik "Save" dan lihat hasilnya.

Apabila widget ini hanya ditampilkan pada halaman keseluruhan (bukan di homepage) maka perlu penambahan kode sebagai berikut.

• Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates".
• Cari teks (gunakan Ctrl + F) "Related Posts",  apabila sudah ketemu maka tambahkan kode yang berwarna merah seperti pada contoh kode di bawah ini.
  
  
  <b:widget id='HTML7' locked='false' title='Related Posts' 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>
   
• Klik "Save" untuk menyimpan template.

Dilihat dari langkah-langkahnya memang pemasangan widget ini agak rumit, tapi santai aja bro, ikuti langkah demi langkah secara pelan-pelan pasti berhasil. Kalo masih belum berhasil silakan tanyakan permasalahannya di kotak komentar.

.: Semoga Bermanfaat :.