Jika kita memiliki sebuah blog dengan pengunjung yang berjibun dan postingan yang banyak, tentunya sangat kerepotan untuk membalas komentar yang masuk, apalagi untuk posting yang sudah lama. Tidak mungkin kita memerikas satu-persatu isi komentar pada setiap postingan. Nah, kerepotan itu tidak akan terjadi jika kita memasang Recent Comment atau Komentar Terbaru di blog kita.
Untuk memasangnya, terdapat sekurang-kurangnya dua cara; yakni dengan menggunakan url feed comment blog kita atau dengan menggunakan JavaScript. Dan postingan kali ini, kita akan sharing cara yang kedua, yakni membuat Recent Comment dengan JavaScript.
Langkah-langkahnya :
- Masuk DASBOR, TATA LETAK, lalu ELEMEN HALAMAN, pilih HTML/JavaScript.
- Copy-paste JavaScript berikut di ELEMEN HALAMAN tadi
<script style="text/javascript">
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(alturl);
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";
var comment = entry.content.$t;
var alamat = entry.author.$t;
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");
if(entry.author[0].uri){
var uri = entry.author[0].uri.$t;
var urilink = uri.split(":");
urilink = urilink[0];
if (urilink != "http") var uri = "http://" + entry.author[0].uri.$t;
}
else {
var uri = false;
}
if(uri){
if (showcommentdate == true) document.write('<div class="komentar-terbaru">' + '<div class="yang-komentar">' + entry.author[0].name.$t + '</div>');
if (showposttitle == true) document.write(' on ' +'<div class="judul">'+ posttitle +'</div>');
document.write(':<br/>'+'</div>');
if (comment.length < numchars)
document.write('<div class="isi">' + comment + '</div>');
else
document.write('<div class="isi">'+ comment.substring(0, numchars) + '...'+'</div>' );
}
else {
if (showcommentdate == true) document.write('<div class="komentar-terbaru">' + '<div class="yang-komentar">' + entry.author[0].name.$t + '</div>');
if (showposttitle == true) document.write(' on ' +'<div class="judul">'+ posttitle +'</div>');
document.write(':<br/>'+'</div>');
if (comment.length < numchars)
document.write('<div class="isi">' + comment + '</div>');
else
document.write('<div class="isi">'+ comment.substring(0, numchars) + '...'+'</div>' );
}
}
}</script><script style="text/javascript">var numcomments = 9;var showcommentdate = true;var showposttitle = true;var numchars = 100;</script><script src="http://bahauddin-amyasi.blogspot.com/feeds/comments/default?max-results=10&alt=json-in-script&callback=showrecentcomments"></script>
Catatan:
Ubah bahauddin-amyasi.blogspot.com dengan nama blog anda.
Angka 10 menunjukkan komentar yang akan ditampilkan, silahkan rubah sesuai keinginan anda.
- Setelah selesai copy-paste, silahkan disimpan dulu.
- Lalu kembali ke TATA LETAK, terus EDIT HTML.
- Copy kode CSS berikut, lalu paste sebelum kode ]]></b:skin>
/* Komentar Terbaru */
.isi {
padding-bottom:10px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:11px;
padding-left:17px;
}
.judul {
display:inline;
text-transform:capitalize;
}
.yang-komentar {
display: inline;
font-weight:bold;
}
.komentar-terbaru {
padding: 2px 0 2px 17px ;
border-top:1px solid #809fbd;
border-bottom: 1px solid #809fbd;
background: #D3DFE9 url(http://bp3.blogger.com/_KL7_V6HnzdI/RhrL4XaiIhI/AAAAAAAAANo/LArJfJFOEw0/s400/blue.gif) no-repeat 2px 6px;
}
- Jangan lupa disimpan dan lihat hasilnya
Catatan :
Silahkan rubah http://bp3.blogger.com/_KL7_V6HnzdI/RhrL4XaiIhI/AAAAAAAAANo/LArJfJFOEw0/s400/blue.gif dengan link gambar anda.
Happy blogging....