Cara Membuat Widget Recent Comment ( Komentar Terbaru ) di Blogger

Cara Membuat dan Memasang Widget Komentar Terbaru ( Recent Comment ) di Blogger - Komentar merupakan serangkaian penuturan fakta, pendapat, atau hasil pengamatan yang mengandung kritik atau tanpa kritik. Sedangkan widget komentar terbaru atau recent comment blog adalah aplikasi yang menampilkan beberapa kumpulan komentar terbaru dari pengunjung atau pembaca di blog.

Aplikasi ini berfungsi untuk memudahkan anda dan pengunjung untuk mengetahui komentar terakhir yang baru saja masuk ke blog anda tanpa harus login terlebih dahulu ke akun blogger. Disamping itu widget ini juga dapat membantu anda untuk mengetahui sejauh mana terkenalnya artikel yang anda buat serta melakukan penilaian terhadap artikel anda sendiri dengan membaca komentar dari para pengunjung.

Dilihat dari penjelasan diatas, widget ini sangat penting untuk diaplikasikan ke blog. Maka dari itu sesuai dengan topik kita hari saya akan berbagi bagaimana cara membuat dan memasang widget ini di blog atau website.

Dalam membuat widget Recent Comment ini tidaklah terlalu sulit , anda hanya tinggal memilih dari 2 bentuk tampilan widget lalu meng-copy paste barisan kode di bawahnya ke dalam gadget HTML/JavaScript. Jadi anda tidak usah pusing memikirkan koding css dan javascript untuk membuatnya, kecuali jika anda sudah terbiasa makan asam garam html dan javascript, maka tidak sulit bagi anda untuk memodifikasi widget recent Comment ini atau bahkan menciptakan widget yang jauh lebih keren lagi.

Apabila anda belum mengetahui penampakan dari widget recent comment ini, silahkan anda scroll ke bawah footer blog ini dan klik tab FRIENDS pada menu tab view.

Cara Membuat dan Memasang Widget Komentar Terbaru atau Recent Comment di Blogger

Anda pilih salah satu dari tampilan widget recent comment dibawah untuk anda pasang di blog
1. Pertama silahkan anda login ke akun blogger.
2. Pada menu blogger atau dashboard, pilih menu Tata letak >> lalu klik Tambahkan gadget pada posisi yang anda inginkan.
3. Pilih dan klik gadget HTML/JavaScript.
4. Pilih tampilan widget recent comment berikut sesuai selera anda, lalu copy kode dibawahnya.

Recent Comment Tanpa Avatar/Gambar

Kode :

<script type="text/javascript">
var a_rc = 5;
var m_rc = false;
var n_rc = true;
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> commented"),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://harmansh.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script>
<style type="text/css">
.rcw-comments a {text-transform: capitalize;}
.rcw-comments {border-bottom: 1px dotted;padding: 7px 0;}
</style>

Ganti tulisan harmansh.blogspot.com dengan URL blog atau website anda.
Beberapa parameter yang bisa anda modifikasi sesuai keinginan anda :

• Jumlah komentar, ganti nilai 5 pada a_rc untuk jumlah komentar yang akan ditampilkan sesuai dengan kebutuhan anda.
• Memunculkan tanggal komentar, ganti tulisan false pada m_rc menjadi true.
• Menyembunyikan judul postingan, ganti tulisan true pada n_rc menjadi false.
• Menentukan jumlah karakter komentar yang akan ditampilkan, ganti nilai 100 pada o_rc sesuai dengan selera anda.

Recent Comment dengan Avatar/Gambar

Kode :

<style type="text/css">
ul.h_recent_comments{list-style:none;margin:0;padding:0;}
.h_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.h_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.h_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.h_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments  = 10,
showAvatar  = true,
avatarSize  = 50,
characters  = 60,
defaultAvatar  = "https://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://cdn.rawgit.com/harmansyah/harmansyah-html/65e03cd5/recentcomment.js"></script>
<script type="text/javascript" src="https://harmansh.blogspot.com/feeds/comments/default?alt=json&callback=h_recent_comments&max-results=10"></script>

Ganti tulisan harmansh.blogspot.com dengan URL Blog atau website anda.

5. Paste atau tempelkan kode tersebut ke kontak konten seperti gambar berikut. Lalu klik Simpan atau Save.

Warning : Apabila widget recent comment atau komentar terbaru dengan avatar atau gambar tidak muncul, hal itu dikarenakan tidak adanya kode yang berfungsi untuk menampilkan avatar/gambar pada kode template anda. Seperti template blog ini, saya sengaja menghapus beberapa kode agar avatar/gambar tidak tampil di kolom komentar dengan maksud supaya loading blog ketika membuka salah satu artikel menjadi lebih ringan.

Jadi sebelum memilih tampilan widget recent comment, sebaiknya anda cek terlebih dahulu dengan tes komen di blog anda sendiri, apakah kolom komentar blog anda menggunakan avatar atau tidak.

Namun jika anda tetap ingin menggunakan widget recent comment atau komentar terbaru dengan avatar/gambar dan template blog anda tidak terdapat kode yang berfungsi menampilkan avatar, silahkan baca artikel yang berjudul Cara Menampilkan Avatar pada Komentar Blogger

Demikian tutorial sederhana tentang bagaimana cara membuat widget komentar terbaru (recent comment) di blogger. Semoga bermanfaat and " Happy Blogging "

Related Posts :

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG