Mohon maaf, mungkin terdapat beberpa tulisan yang contohnya tidak ada dan tidak dapat didownload bahkan sudah tidak dapat diterapkan. Hal ini dikarenakan tulisan tersebut dibuat babaerapa tahun lalu (jadul).

01 December 2017

Menampilkan Widget Recent Comment atau Komentar Terbaru pada Blogger

Kita berjumpa lagi dalam tutorial selanjutnya. Tutorial kali ini merupakan tutorial lawas namun masih juga diperlukan dan ditampilkan pada blog Kita, yakni menampilkan komentar terbaru pada blog. Blog kali ini menggunakan blogger / blogspot. Fungsi dari menampilkan komentar terbaru ini juga menguntungkan buat pemilik blog, hal ini dikarenakan mudah dilihat ketika terdapat komentar terbaru, pemilik blog bisa mengetahuinya lewat halaman pengunjung dan membalas komentar tersebut sehingga terdapat interaksi antara komnetar pengunjung dan pemilik. Selama ini sering Kita jumpai apabila pemilik blog jarang menjawab, mungkin salah satunya ketidak tahuan apabila ada pertanyaan pada komentar artikel yang bersangkutan. Sebagai contoh, Anda dapat melihat bagian kiri halaman ini.

Source code ini bukan buatan saya tapi buatan Hans Oosting yang beralamat di http://beautifulbeta.blogspot.com. Dengan source code ini kita bisa mengedit sendiri "Recent Comment" sesuai dengan keinginan,yang jelas jika kita sudah punya basic pemrograman pasti bisa mengedit kode ini dengan mudah, asal jangan lupa jangan merubah kode sumber pembuatnya.

Source code terdiri dari 2 bagian, yang pertama yakni bagian file yang berisi code utuk memanggil dan memisah kan file json dari komentar suatu blog dan file yang lainnya berfungsi untuk memanggil file json yang kita buat. Berikut adalah file pertama :
// ----------------------------------------
// SHOW RECENT COMMENTS
// ----------------------------------------
// This functions takes a blogger-feed in JSON
// format and displays it.
//
// Version:2.1
// Date:2007-02-02
// Author:Hans Oosting
// URL:beautifulbeta.blogspot.com
// ----------------------------------------

function showrecentcomments(json) {
 for (var i = 0;
 i < numcomments;
 i++) {
  var entry = json.feed.entry[i];
  var alturl;
  if (i == json.feed.entry.length) break;
  for (var k = 0;
  k < entry.link.length;
  k++) {
   if (entry.link[k].rel == 'alternate') {
    alturl = entry.link[k].href;
    break;
   }
  }
  alturl = alturl.replace("#","#comment-");
  var postlink = alturl.split("#");
  postlink = postlink[0];
  var linktext = postlink.split("/");
  linktext = linktext[5];
  linktext = linktext.split(".html");
  linktext = linktext[0];
  var posttitle = linktext.replace(/-/g," ");
  posttitle = posttitle.link(postlink);
  var commentdate = entry.published.$t;
  var cdyear = commentdate.substring(0,4);
  var cdmonth = commentdate.substring(5,7);
  var cdday = commentdate.substring(8,10);
  var monthnames = new Array();
  monthnames[1] = "Jan";
  monthnames[2] = "Feb";
  monthnames[3] = "Mar";
  monthnames[4] = "Apr";
  monthnames[5] = "May";
  monthnames[6] = "Jun";
  monthnames[7] = "Jul";
  monthnames[8] = "Aug";
  monthnames[9] = "Sep";
  monthnames[10] = "Oct";
  monthnames[11] = "Nov";
  monthnames[12] = "Dec";
  if ("content" in entry) {
   var comment = entry.content.$t;
  }
  elseif ("summary" in entry) {
   var comment = entry.summary.$t;
  }
  else var comment = "";
  var re = /<\S[^>]*>/g;
  comment = comment.replace(re,"");
  if (!standardstyling) document.write('<div class="bbrecpost">');
  if (showcommentdate == true) document.write('On '+monthnames[parseInt(cdmonth,10)]+' '+cdday+' ');
  document.write('<a href="'+alturl+'">'+entry.author[0].name.$t+'</a>commented');
  if (showposttitle == true) document.write(' on '+posttitle);
  if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
  if (comment.length < numchars) {
   if (standardstyling) document.write('<i>');
   document.write(comment);
   if (standardstyling) document.write('</i>');
  }
  else {
   if (standardstyling) document.write('<i>');
   comment = comment.substring(0,numchars);
   var quoteEnd = comment.lastIndexOf(" ");
   comment = comment.substring(0,quoteEnd);
   document.write(comment+'...<a href="'+alturl+'">(more)</a>');
   if (standardstyling) document.write('</i>');
  }
  if (!standardstyling) document.write('</div>');
 }
 if (!standardstyling) document.write('<div class="bbwidgetfooter">');
 document.write('<span style="font-size:80%;">Widget by <a href="http://hackosphere.blogspot.com">Hackosphere</a>Powered by <a href="http: //beautifulbeta.blogspot.com">Beautiful Beta</a></span>');
 if (!standardstyling) document.write('</div>');
}
Copy file di atas pada notepad kemudian simpan dengan extensi txt. Setelah itu, letakkan pada hosting yang Anda miliki, baik hosting yang gratis ataupun yang berbayar, hal ini agar file json tersebut mudah diakses. Setelah selesai, kita buat code yang kedua. Code yang kedua ini berfungsi untuk memanggil code yang pertama kita buat tadi. Berikut code-nya.
<script style="text/javascript" src="link tempat Anda menyimpan code pertama"></script>
<script style="text/javascript">
//jumlah komentar yang akan ditampilkan
var numcomments = 5;
//untuk menampilkan tanggal komentar
var showcommentdate = true;
//untuk menampilkan judul posting
var showposttitle = true;
//panjang karakter komentar yang ditampilkan
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://alamat blog Anda/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Letakkan code di atas pada gadget HTML/JavaScript di menu tata letak halaman admin blogger. Kumpulan code di atas akan menampilkan recent comment standar. Namun bila Anda ingin seperti atau bahkan ingin megubah tampilan recent comment sebelah kanan blog ini, silahkan Anda download code pertama pada tombol di bawah ini dan silahkan letakkan pada hsoting Anda atau bisa juga gunakan url berikut pada code ke dua http://demo.contohnya.net/file/ndung.txt. Selamat mencoba.

No comments:

Post a Comment