Februari 12, 2010

Membuat Widget Recent Comment di Blogger

Tutorial ini akan menjelaskan cara Membuat Widget Recent Comment di Blogger, dengan adanya widget ini dapat memudahkan kita sebagai admin blog untuk mengetahui komentar terbaru.

Widget Recent Comment dalam tutorial ini shevy bagi 2, diantaranya:
  1. Widget Recent Comment dengan javascript, Beginner version (sok  inggris, hehe).
  2. Widget Recent Comment tanpa Javascript, yang ini paling gampang.
Mau tau Langkah2 untuk Membuat Widget Recent Comment, ok cekidot...

1. Widget Recent Comment dengan javascript

  • Langkah pertama login ke blogger - dari halaman Dashboard masuk ke Tata Letak / Layout - Kemudian masuk ke tab Elemen Halaman / Page Elemen.
  • Selanjutnya tambahkan gadget baru, dengan memilih Tambah Gadget / Add Gadget. Pilih type HTML / Javascript.
  • Kemudian masukan script dibawah ini kedalam gadget baru tersebut.
  • <script style="text/javascript"> function showrecentcomments(json) { var numcomments = 5; var showcommentdate = true; var showposttitle = true; var numchars = 100; 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;} else if ("summary" in entry) { var comment = entry.summary.$t;} else var comment = ""; var re = /<S[^>]*>/g; comment = comment.replace(re, ""); document.write('<br/>'); 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); document.write('<br/>'); if (comment.length < numchars) { document.write('<i>'); document.write(comment); document.write('</i>');} else { 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>'); document.write('</i>');} document.write('<br/>'); } document.write('<br/>'); } </script> <script src="http://Alamat_blog_kamu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"> </script>
  • Script yang saya tandai dengan warna putih, ganti dengan alamat blog kamu. 
  • Setelah memasukan script diatas, jangan lupa kasih judul widget tersebut. Seperti contoh gambar dibawah.
Membuat Widget Recent Comment di Blogger
  • Langkah terakhir save template, dan lihat hasilnya.

2.  Recent Comments Cara Kedua

  • Langkah pertama login ke blogger - dari halaman Dashboard masuk ke Tata Letak / Layout - kemudian masuk ke tab Elemen Halaman / Page Element.
  • Tambahkan gadget baru, dengan klik Tambah Widget / Add Gadget. Kemudian pilih type Feed. Seperti gambar dibawah ini.
Membuat Widget Recent Comment di Blogger

  • Kemudian masukan alamat feed comment blog kamu. Seperti url contoh dibawah ini. Ganti shevy-blog.blogspot.com dengan url blog kamu. 
http://shevy-blog.blogspot.com/feeds/comments/default
Membuat Widget Recent Comment di Blogger

  •  Kemudian klik Next, dan akan disana akan muncul jendela seperti dibawah.

Membuat Widget Recent Comment di Blogger
  • Silahkan Ubah pengaturannya sesuai dengan keinginan kamu. Berikut keterangannya :
Judul : Judul Widget kamu misal "Recent Comments atau Komentar Terbaru".
Tampilkan : Jumlah komentar yang akan ditampilkan didalam widget.
Tanggal : Menampilkan tanggal komentar pada widget recent comments.
Sumber pengarang : nama orang yang memberikan komentar.
Buka link dijendela baru : Setiap kita klik link di widget itu, maka akan membuka tab baru pada browser.

  • Jika sudah jangan lupa klik Simpan - Simpan Template. Dan lihat hasilnya.

Udah ya, selamat mencoba...
bentar lagi valentine,,, jomblo deui, huphhh... :(

19 komentar:

  1. @beben
    makasih udah mau berkomen sob,,

    BalasHapus
  2. Contoh nya di blog anda mana??? T_T masa kasih tutorial tapi ndak dipasang juga di blog nya ?? T_T :D :D :D ^^V

    BalasHapus
  3. Adittya Wirawan,

    itu yang dibawah footer blog ini.... yang judul widgetnya "Recent comment".

    BalasHapus
  4. Adittya Wirawan,

    itu yang dibawah footer blog ini.... yang judul widgetnya "Recent comment".

    BalasHapus
  5. asyik dapat ilmu baru lagi...enak bgt neh jadi newbie sekarana....hehehehehe makasih gan..... ^^

    BalasHapus
  6. Thanks Broooooooooow
    visiting Brooooooooow

    BalasHapus
  7. udah di pasang mas..... mantaff!!

    BalasHapus
  8. makin mantap aja sobatku yang satu ini......

    BalasHapus
  9. thanks infonya..kemaren nyari di blog sebelah ternyata gagal, sekarang berhasil dech setelah nemu blog ini hehehe..

    nice blog shev

    BalasHapus
  10. salam kenal ,, nice mbak , yuk tukeran link yuk mbak

    BalasHapus
  11. terimakasih..
    terimakasih..
    terimakasih..
    hehehe.. ^^

    BalasHapus
  12. Mnatab, sudah saya coba dan berhasil Gan,,

    TErimakasih,,

    BalasHapus
  13. terimakasih semuanya dah mau comment :D...
    ntar mampir lagi yah...

    BalasHapus
  14. bisa g saya minta kode htmlnya recent post, g pake' php ato js?

    BalasHapus
  15. @atas,,
    waduh,,, kalo ga pake javascript ato jquery susah, saya juga belum nemu recent post yang gak pake javascript.

    BalasHapus
  16. Sip,tutorialnya dah ane praktekin, and sukses
    mampir kesini juga y gan....

    BalasHapus