Membuat Widget Komentar Terbaru (Recent Comment) di Blogger

Widget Komentar Terbaru (Recent Comment) yang akan saya tunjukkan khusus untuk Blogger ini berfungsi untuk menampilkan daftar komentar beserta judul dari Artikel pada Blog (Blogspot) secara berurutan dari komentar terbaru sampai komentar terakhir tanpa menggunakan jQuery.

Pada Widget ini, kalian dapat mengatur Parameter seperti:

1. Jumlah komentar - Jumlah komentar yang ingin ditampilkan;
2. Tanggal komentar - Tanggal komentar, kalian dapat menampilkan dan menyembunyikannya;
3. Judul Artikel - Kalian dapat menampilkan dan menyembunyikannya;
4. Jumlah Kata pada Komentar - Kalian dapat mengatur jumlah kata pada komentar yang ingin ditampilkan;

Untuk menambahkan Widget Komentar pada Blog sangat mudah. Cukup ikuti langkah-langkah berikut:

Contoh Widget Komentar Terbaru (Recent Comment)

Demo Widget Komentar Default

Demo Widget Komentar dengan Tanggal Artikel

Menambahkan Widget Komentar Terbaru (Recent Comment) di Blogger

1. Langkah Pertama: Masuk ke Dashboard Blogger, pilih menu Layout (Tata Letak) > Add Gadget (Tambahkan Gadget).
2. Langkah Kedua: Cari dan klik tambahkan Widget HTML/JavaScript.
3. Langkah Ketiga:  Salin dan Pastekan kode berikut tepat didalam Widget HTML/JavaScript:
   - Versi Beautified (Normal):

   <script>
       // Jumlah Komentar yang ingin ditampilkan
       var jumlahKomentar = 5;
   
       // true = menampilkan tanggal komentar
       // false = menyembunyikan tanggal komentar
       var tanggalKomentar = false;
   
       // true = menampilkan judul artikel yang dikomentari
       // false = menyembunyikan judul artikel yang dikomentari
       var judulArtikelKomentar = true;
   
       // Jumlah maksimal karakter komentar
       var jumlahKarakterKomentar = 100;
   
       function showrecentcomments(e) {
           for (var jsonFeed = 0; jsonFeed < jumlahKomentar; jsonFeed++) {
               var entryFeed, entryFeeds = e.feed.entry[jsonFeed];
               if (jsonFeed == e.feed.entry.length) break;
               for (var i = 0; i < entryFeeds.link.length; i++)
                   if ("alternate" == entryFeeds.link[i].rel) {
                       entryFeed = entryFeeds.link[i].href;
                       break
                   }
   
                   entryFeed = entryFeed.replace("#", "#");
   
                   var entryFeedSplit = entryFeed.split("#");
                   entryFeedSplit = entryFeedSplit[0];
   
                   var entryFeedSlashSplit = entryFeedSplit.split("/");
                   entryFeedSlashSplit = entryFeedSlashSplit[5], entryFeedSlashSplit = entryFeedSlashSplit.split(".html"), entryFeedSlashSplit = entryFeedSlashSplit[0];
   
                   var entryFeedSplitReplace = entryFeedSlashSplit.replace(/-/g, " ");
                   entryFeedSplitReplace = entryFeedSplitReplace.link(entryFeedSplit);
   
                   var entryPublished = entryFeeds.published.$t, entryDatePublish = (entryPublished.substring(0, 4), entryPublished.substring(5, 7)), entryDatePublished = entryPublished.substring(8, 10), bulan = new Array;
   
                   if (bulan[1] = "Januari", bulan[2] = "Februari", bulan[3] = "Maret", bulan[4] = "April", bulan[5] = "Mei", bulan[6] = "Juni", bulan[7] = "Juli", bulan[8] = "Agustus", bulan[9] = "September", bulan[10] = "Oktober", bulan[11] = "November", bulan[12] = "Desember", "content" in entryFeeds) var entryContent = entryFeeds.content.$t;
                   else if ("summary" in entryFeeds) var entryContent = entryFeeds.summary.$t;
                   else var entryContent = "";
   
                   var regEx = /<\S[^>]*>/g;
                   if (entryContent = entryContent.replace(regEx, ""), document.write('<div class="elcreative-recent-comments">'), 1 == tanggalKomentar && document.write(bulan[parseInt(entryDatePublish, 10)] + " " + entryDatePublished + " - "), document.write(' <b class="elcreative-recent-comments__author"><a href="' + entryFeed + '">' + entryFeeds.author[0].name.$t + "</a></b> Berkomentar"), 1 == judulArtikelKomentar && document.write(" di Artikel " + entryFeedSplitReplace), 0 == jumlahKarakterKomentar) document.write("</div>");
                   else if (document.write(": "), entryContent.length < jumlahKarakterKomentar) document.write("<i>&#8220;"), document.write(entryContent), document.write("&#8221;</i></div>");
                   else { document.write("<i>&#8220;"), entryContent = entryContent.substring(0, jumlahKarakterKomentar);
                   var entryFinal = entryContent.lastIndexOf(" ");
                   entryContent = entryContent.substring(0, entryFinal), document.write(entryContent + "&hellip;&#8221;</i></div>"), document.write("")
               }
           }
       }
   </script>
   
   <script src="https://nama-blog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
   
   <style type="text/css">
       .elcreative-recent-comments {border-bottom: .0625rem solid #dadce0; padding: 15px 0;}
       .elcreative-recent-comments a {text-decoration: underline; }
       .elcreative-recent-comments__author a {text-decoration: none; }
   </style>`
   
   

   
   - Versi Minified:
   

   <script>var jumlahKomentar=5;var tanggalKomentar=!1;var judulArtikelKomentar=!0;var jumlahKarakterKomentar=100;function showrecentcomments(e){for(var jsonFeed=0;jsonFeed<jumlahKomentar;jsonFeed++){var entryFeed,entryFeeds=e.feed.entry[jsonFeed];if(jsonFeed==e.feed.entry.length)break;for(var i=0;i<entryFeeds.link.length;i++)if("alternate"==entryFeeds.link[i].rel){entryFeed=entryFeeds.link[i].href;break}entryFeed=entryFeed.replace("#","#");var entryFeedSplit=entryFeed.split("#");entryFeedSplit=entryFeedSplit[0];var entryFeedSlashSplit=entryFeedSplit.split("/");entryFeedSlashSplit=entryFeedSlashSplit[5],entryFeedSlashSplit=entryFeedSlashSplit.split(".html"),entryFeedSlashSplit=entryFeedSlashSplit[0];var entryFeedSplitReplace=entryFeedSlashSplit.replace(/-/g," ");entryFeedSplitReplace=entryFeedSplitReplace.link(entryFeedSplit);var entryPublished=entryFeeds.published.$t,entryDatePublish=(entryPublished.substring(0,4),entryPublished.substring(5,7)),entryDatePublished=entryPublished.substring(8,10),bulan=new Array;if(bulan[1]="Januari",bulan[2]="Februari",bulan[3]="Maret",bulan[4]="April",bulan[5]="Mei",bulan[6]="Juni",bulan[7]="Juli",bulan[8]="Agustus",bulan[9]="September",bulan[10]="Oktober",bulan[11]="November",bulan[12]="Desember","content" in entryFeeds)var entryContent=entryFeeds.content.$t;else if("summary" in entryFeeds)var entryContent=entryFeeds.summary.$t;else var entryContent="";var regEx=/<\S[^>]*>/g;if(entryContent=entryContent.replace(regEx,""),document.write('<div class="elcreative-recent-comments">'),1==tanggalKomentar&&document.write(bulan[parseInt(entryDatePublish,10)]+" "+entryDatePublished+" - "),document.write(' <b class="elcreative-recent-comments__author"><a href="'+entryFeed+'">'+entryFeeds.author[0].name.$t+"</a></b> Berkomentar"),1==judulArtikelKomentar&&document.write(" di Artikel "+entryFeedSplitReplace),0==jumlahKarakterKomentar)document.write("</div>");else if(document.write(": "),entryContent.length<jumlahKarakterKomentar)document.write("<i>&#8220;"),document.write(entryContent),document.write("&#8221;</i></div>");else{document.write("<i>&#8220;"),entryContent=entryContent.substring(0,jumlahKarakterKomentar);var entryFinal=entryContent.lastIndexOf(" ");entryContent=entryContent.substring(0,entryFinal),document.write(entryContent+"&hellip;&#8221;</i></div>"),document.write("")}}}</script><script src="https://nama-blog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script><style type="text/css">.elcreative-recent-comments{border-bottom:.0625rem solid #dadce0;padding:15px 0}.elcreative-recent-comments a{text-decoration:underline}.elcreative-recent-comments__author a{text-decoration:none}</style>
   
   

4. Langkah Keempat: Cari dan ubah URL: https://nama-blog.blogspot.com dengan URL Blog kalian (Perlu diperhatikan bahwa tidak ada tanda garis miring / di akhir URL).
5. Langkah Kelima: Klik tombol Save (Simpan) dan lihatlah langsung pada Blog kalian.

Pengaturan Widget Komentar

Mengubah Jumlah Komentar

Untuk mengubah jumlah komentar yang ingin ditampilkan, ubahlah angka "5" dari variabel  jumlahKomentar. Contoh:

var jumlahKomentar = 5;

// Diubah menjadi 10
var jumlahKomentar = 10;

Menambahkan Tanggal Komentar

Untuk menambahkan tanggal pada daftar komentar yang telah dibuat, ubahlah teks "false" dari variabel tanggalKomentar menjadi "true". Contoh:

var tanggalKomentar = false;

// Diubah menjadi true
var tanggalKomentar = true;

Menyembunyikan Judul Artikel

Untuk menyembunyikan judul artikel, ubahlah teks "true" dari variabel judulArtikelKomentar menjadi "false". Contoh

var judulArtikelKomentar = true;

// Diubah menjadi false
var judulArtikelKomentar = true;

Mengatur Jumlah Karakter Komentar

Untuk mengatur jumlah karakter pada komentar, ubahlah nilai "100" dari variabel jumlahKarakterKomentar. Contoh:

var jumlahKarakterKomentar = 100;

// Diubah menjadi 200 karakter
var jumlahKarakterKomentar = 200;

Download Source Code (Github)