Melengkapi tutorial blogging di blog saya ini.. kali ini saya akan membahas bagaimana membuat widget Recent Comments.. yaitu suatu widget yang berkemampuan menampilkan beberapa komentar terakhir dalam postingan di blog kita...
Keuntungannya... ialah akan membantu kita dalam mengetahui beberapa komentar yang terbaru... kita juga mengetahui postingan mana saja yang menjadi favorit pembaca... dan apa saja tutorial yang paling dicari ?..
Baiklah... langsung saja mulai pembahasan membuat widget recent comments versi saya... jadi pahami baik-baik ya...
Baiklah... langsung saja mulai pembahasan membuat widget recent comments versi saya... jadi pahami baik-baik ya...
Langkah-langkah membuatnya sebagai berikut ;
1. Seperti biasa login ke Blogger ...
2. Perhatikan kode javascript dibawah ini....
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] = "Mei";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Ags";
monthnames[9] = "Sep";
monthnames[10] = "Okt";
monthnames[11] = "Nov";
monthnames[12] = "Des";
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("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 (standardstyling) document.write('<li>');
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a>');
if (showposttitle == true) document.write(' mengomentari ' + posttitle);
if (showcommentdate == true) document.write(' bulan ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ' ');
if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
if (standardstyling) document.write('<br/>');
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 + '">(dan seterusnya...)</a>');
if (standardstyling) document.write('</i>');}
if (!standardstyling) document.write('</div>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('</li>');
document.write('<span ><a href="http://suryachandragobel.blogspot.com/feeds/comments/default/" target="_blank">Recent Comment SuryaCG</a></span>');
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] = "Mei";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Ags";
monthnames[9] = "Sep";
monthnames[10] = "Okt";
monthnames[11] = "Nov";
monthnames[12] = "Des";
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("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 (standardstyling) document.write('<li>');
document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a>');
if (showposttitle == true) document.write(' mengomentari ' + posttitle);
if (showcommentdate == true) document.write(' bulan ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday + ' ');
if (!standardstyling) document.write('</div><div class="bbrecpostsum">');
if (standardstyling) document.write('<br/>');
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 + '">(dan seterusnya...)</a>');
if (standardstyling) document.write('</i>');}
if (!standardstyling) document.write('</div>');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('</li>');
document.write('<span ><a href="http://suryachandragobel.blogspot.com/feeds/comments/default/" target="_blank">Recent Comment SuryaCG</a></span>');
if (!standardstyling) document.write('</div>');}
Ket :
> Copy-paste kode javascript diatas ke dalam notepad..
> Lalu ubah teks yang berwarna merah sesuai keinginan kalian...
> Jika telah selesai simpan file notepad ini dengan format .js ... misalnya : recent comments_ecaknyo.js
3. Simpan (Upload) file recent comments.js ini ke google site atau ke server file lainnya... jika sudah salinlah tautan url file recent comments.js tadi...
Contoh : kalau saya menggunakan penyimpanan file di google site.. tautan url-nya seperti ini...
> Copy-paste kode javascript diatas ke dalam notepad..
> Lalu ubah teks yang berwarna merah sesuai keinginan kalian...
> Jika telah selesai simpan file notepad ini dengan format .js ... misalnya : recent comments_ecaknyo.js
3. Simpan (Upload) file recent comments.js ini ke google site atau ke server file lainnya... jika sudah salinlah tautan url file recent comments.js tadi...
Contoh : kalau saya menggunakan penyimpanan file di google site.. tautan url-nya seperti ini...
https://sites.google.com/site/suryachandragobelblogspot/home/surya_osd/recent%20comments_SuryaCG.js?attredirects=0&d=1
Ket :> Copy hanya sampai batas .js saja ( yang saya warnai hitam diabaikan )...
4. langkah instalasi widget-nya.. Blogger > Rancangan > Elemen Halaman > Tambah Gadget > HTML/Javascript ... lalu copas kode dibawah ini ke dalamnya..
<ul><script style="text/javascript" src="https://sites.google.com/site/suryachandragobelblogspot/home/surya_osd/recent%20comments_SuryaCG.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate =false;var showposttitle = true;var numchars = 100;var standardstyling =true;</script><script src="http://suryachandragobel.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></ul>
Ket :
> Biru = Gantilah dengan url file javascript ( .js ) milik kamu yang di-Upload tadi...
> Merah = Gantilah nilai angka-nya sesuai keinginanmu atau biarkan saja (default)..
- Numcomments = Menampilkan banyaknya jumlah komentar...
- Numchar = Menentukan seberapa panjang isi Recent Comment yang ingin ditampilkan...
> Hitam = Gantilah menjadi "true" jika ingin ditampilkan.. atau "false" jika ingin disembunyikan..
- showcommentdate = Menampilkan bulan & tahun...
- showposttitle = Menampilkan judul posting yang dikomentari...
> Hijau = Gantilah dengan feed comments blog kamu sendiri...
5. Jika sudah kamu atur sedemikian rupa..maka Simpan widget & Refresh blog kamu... (letakan dimana saja posisi widget-nya )...
> Biru = Gantilah dengan url file javascript ( .js ) milik kamu yang di-Upload tadi...
> Merah = Gantilah nilai angka-nya sesuai keinginanmu atau biarkan saja (default)..
- Numcomments = Menampilkan banyaknya jumlah komentar...
- Numchar = Menentukan seberapa panjang isi Recent Comment yang ingin ditampilkan...
> Hitam = Gantilah menjadi "true" jika ingin ditampilkan.. atau "false" jika ingin disembunyikan..
- showcommentdate = Menampilkan bulan & tahun...
- showposttitle = Menampilkan judul posting yang dikomentari...
> Hijau = Gantilah dengan feed comments blog kamu sendiri...
5. Jika sudah kamu atur sedemikian rupa..maka Simpan widget & Refresh blog kamu... (letakan dimana saja posisi widget-nya )...
Selamat Mencoba,,
Tidak ada komentar:
Posting Komentar