Membuat Widget Recent Comments Sederhana Untuk Blogger

IwanBerbagi.com - Saya memutuskan untuk kembali menggunakan komentar blogger karena saya rasa lebih baik menggunakan komentar blogger dari pada Disqus. Sekalian juga saya ingin memiliki suasana baru lagi pada blog ini dan juga pada kolom kementarnya menjadi lebih ennak juga karena komentar blogger akan terindeks langsung ke Google di mesin pencarian.
Membuat Widget Recent Comments Blogger Sederhana
Namun saya terkendala ketika ingin mengecek komentar yang masuk pada salah satu artikel yang pengunjung komen. Dengan itu saya berfikir lebih baik menggunakan widget pihak ketiga untuk melihat komentar yang baru masuk pada salah satu artikel saya.

Widget ini akan menampilkan komentar blogger yang paling akhir berkomentar, sebagai contoh jika kamu berkomentar pada artikel ini, maka akan muncul komentar kamu di widget Recent Comments pada sidebar blog saya ini.

Cara Memasang Widget Recent Comments For Blogger

Kamu perlu masuk Tata Letak - Tambahkan Gadget dan kamu tambahkan HTML/Javascript dan sesuaikan masing-masing kolom. Perhatikan gambar berikut :
Membuat Widget Recent Comments Blogger Sederhana
Beri judulnya, kalau saya memberi judulnya menjadi "Recent Comments" seperti yang kamu lihat sendiri digambar tersebut. Selanjutnya di bagian Konten kamu hanya perlu copy kode berikut ini :
<script>
var a_rc = 5;
var m_rc = false;
var n_rc = false;
var o_rc = 100;
function showrecentcomments(e){for(var r=0;r<a_rc;r++){var t,n=e.feed.entry[r];if(r==e.feed.entry.length)break;for(var i=0;i<n.link.length;i++)if("alternate"==n.link[i].rel){t=n.link[i].href;break}t=t.replace("#","#");var a=t.split("#");a=a[0];var c=a.split("/");c=c[5],c=c.split(".html"),c=c[0];var s=c.replace(/-/g," ");s=s.link(a);var o=n.published.$t,l=(o.substring(0,4),o.substring(5,7)),u=o.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in n)var d=n.content.$t;else if("summary"in n)var d=n.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<div class="rcw-comments">'),1==m_rc&&document.write("On "+m[parseInt(l,10)]+" "+u+" "),document.write('<span class="author-rc"><a href="'+t+'">'+n.author[0].name.$t+"</a></span> "),1==n_rc&&document.write(" on "+s),0==o_rc)document.write("</div>");else if(document.write(": "),d.length<o_rc)document.write("<i>&#8220;"),document.write(d),document.write("&#8221;</i></div>");else{document.write("<i>&#8220;"),d=d.substring(0,o_rc);var w=d.lastIndexOf(" ");d=d.substring(0,w),document.write(d+"&hellip;&#8221;</i></div>"),document.write("")}}}
</script>
<script src=https://www.iwanberbagi.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script>
Kamu perlu sesuaikan beberapa hal berikut ini :
var a_rc = 5Atur angka 5 menjadi Jumlah Komentar yang ingin kamu tampilkan pada widget tersebut.
var m_rc = falseKamu perlu Sesuaikan False menjadi true jika kamu ingin menampilkan tanggal komentar itu terbit.
var n_rc = falseKamu Perlu Sesuaikan False menjadi true jika kamu ingin menampilkan judul posting pada komentar tersebut.
var o_rc = 100Sesuaikan nilai 100 dengan Jumlah Karakter komentar yang tampil pada komentar tersebut.
Yang terakhir sesuaikan alamat blog "https://www.iwanberbagi.com" dengan alamat blog kamu sendiri, selanjutnya klik Simpan.

Untuk mengatur tampilannya agar lebih rapih, kamu bisa masuk ke Tema terus masuk ke Edit HTML dan tambahkan CSS berikut ini :
/* RECENT COMMENTS */
.rcw-comments {line-height:1.2;border-bottom: 2px dotted #efefef;padding-bottom:5px;margin-bottom:8px}
.rcw-comments a {text-transform:capitalize}
span.author-rc :before{content:"\f14b";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;margin-right:6px}
span.author-rc :before{content:"\f0e6";color:#777777}
Jika sudah kamu bisa klik Simpan Tema dan lihat hasilnya.
Pastikan blog kamu menggunakan font awesome agar bisa menampilkan logo komentar disamping widgetnya.
Jika kamu tidak menggunakan font awesome kamu bisa menambahkan CSS berikut ini yang lebih sederhana.
/* RECENT COMMENTS */
.rcw-comments {line-height:1.2;border-bottom: 2px dotted #efefef;padding-bottom:5px;margin-bottom:8px}
.rcw-comments a {text-transform:capitalize}
Namun jika kamu ingin tetap menggunakan icon komentar tersebut kamu bisa menambahkan script berikut ini sebelum kode </body> pada template kamu.
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
Sudah segitu saja cara Membuat Widget Recent Comments untuk Komentar Blogger, jika ada yang kamu bingungkan kamu bisa komentar dan kita bahas di kolom komentar saja. Selamat mencoba.
Sumber referensi : https://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html

0 Response to "Membuat Widget Recent Comments Sederhana Untuk Blogger"

Silahkan berkomentar sesuai topik pada Artikel ini, komentar akan saya balas ketika saya sedang tidak ada kesibukan lainnya.

Note : Jangan lupa untuk mengaktifikan centang Notify me pada kolom komentar, agar kamu mendapat notifikasi balasan dari saya langsung Via Email. Tks

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel