Memasang Widget Random Posts di Blogger

Tutorial Firman Santosa – Senang bisa posting hari ini, tentunya dengan tutorial jitu ala Akhbar Islam. Artikel ini adalah artikel kedua setelah artikel pertama tentang cara mudah membuat mouse over button semenjak blog ini didirikan.

Apa itu Widget Random Posts? adalah widget untuk blogger yang menampilkan artikel secara random (acak). Widget ini sangat penting, karena selain sebagai navigasi yang memudahkan pengunjung dalam mencari informasi di blog kita, juga akan menjadikan pengunjung mau berlama-lama di blog kita sehingga tentu akan menambah pageview pengunjung blog kita.

Pemasangan widget ini juga tidaklah rumit, karena kita hanya memasukkan code css nya di atas code </b:skin> dan kemudian dilanjutkan dengan menambah gadget type html/javasrcipt. Untuk contoh bisa anda lihat pada screenshots di atas.

Baiklah, langsung saja kita masuk ke tutorial memasang widget random posts:

Menambahkan code CSS ke halaman html template

• Login ke blog dengan ID anda.
• Pada halaman dashboard blogger tekan link title blog anda.
• Pilih menu Template >> Edit Html
• Tekan Ctrl +F, dan dikotak pencarian, cari code ]]></b:skin>
• Tambahkan code berikut tepat di atas code ]]></b:skin>

  #categorylist{float:left;  margin-top:0px;  margin-bottom:10px}
  #categorylist ul{float:left;  margin:0px;  margin-left:20px;  padding:0px;  font-size:11px}
  #categorylist li{list-style:disc outside url("http://4.bp.blogspot.com/-SIzxtuS5HrU/TgX2jub0HzI/AAAAAAAAEi8/CAXs53FBd1I/s1600/bullet-point-image-8.png"); width:auto; margin-bottom:0;margin-top:0;padding:0;vertical-align:middle;}
  #categorylist a{font-family: "Droid Sans",arial,sans-serif;text-decoration:none;  color:#696969; font-size:12px}
  #categorylist a:visited {color:#3483b0; text-decoration: none}
  #categorylist a:hover{color:#f79e1f}

  Simpan template anda dengan menekan tombol Save Template, sampai disini proses penambahan code css ke dokumen HTML template selesai, dan lanjut ke tahap berikutnya.

Menambah gadged type HTML ke layout blog

• Pastikan anda masih dalam keadaan login di blogger
• Pilih menu Layout >> Add a gadget >> pilih gadget type HTML/Javascript
• Masukkan code ini didalamnya:

  <script type='text/javascript'>
  var relatedpoststitle="";
  </script>
  <script type='text/javascript'>
  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() {
  for(var i = 0; i < relatedUrls.length; i++)
  {
  if(relatedUrls[i]==currentposturl)
  {
  relatedUrls.splice(i,1)
  relatedTitles.splice(i,1)
  
  }
  }
  var r = Math.floor((relatedTitles.length - 1) * Math.random());
  var i = 0;
  
  if(relatedTitles.length>1)
  document.write('<ul>');
  while (i < relatedTitles.length && i < 20 && i<maxresults) {
  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>
  <div id="categorylist">
  <script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8"></script>
  <script type="text/javascript">
  var currentposturl="";
  var maxresults=8;
  removeRelatedDuplicates(); printRelatedLabels();
  </script>
  </div>

  Tekan tombol Save

• Sekarang lihat ke tampilan blog, dan pastikan widget ini berjalan. Jika berjalan dengan baik ucapkan alhamdulillah.

NB:
Untuk mengatur jumlah artikel yang ditampilkan secara acak pada widget silahkan ganti angka 8 pada kode maxresults=8 sesuai dengan keinginan anda. Pada script di atas terdapat 2 kode maxresults=8, jika anda merubahnya samakan angka pada kedua kode tersebut.