May 23, 2015

Widget Komentar Terbaru plus Gambar (Foto) Komentator

May 23, 2015

Widget Komentar Terbaru plus Gambar
POSTING cara memasang atau membuat widget komentar terbaru plus gambar (foto) komentator (recent comments with thumbnail image) ini dibuat setelah CB memasangnya di sidebar sekaligus demo.

Widget Komentar Terbaru, Recent Comments, atau Latest Comments berfungsi sebagai navigasi sekaligus internal link untuk meningkatkan pageviews.

Daftar komentar juga terindeks Google, termasuk widget komentar yang disertai kutipan isi komentar.

Widget Komentar Terbaru plus Gambar (Foto) Komentator makin menarik karena menampilkan avatar G+ komentator. Ini akan mendorong pengunjung "tertarik dan rajin" berkomentar di blog Anda karena foto sang komentator muncul di sidebar blog.

Sebelum ke cara membuat Widget Komentar Terbaru plus Gambar (Foto) Komentator, CB mulai dulu dengan yang kutipan isi saja, lalu tanpa gambar, baru yang plus thumbnail image.

Komentar Terbaru: Kutipan Isi Saja

Tips berikut untuk membuat widget komentar terbaru berupa daftar judul saja:
1. Klik "Layout" atau "Tata Letak".
2. Klik "Add a gadget" di salah satu sidebar atau footer.
3. Pilih "Feeds"
4. Masukkan kode http://URL blog Anda/feeds/comments/default
5. Ganti nama Gadget dengan "Komentar Terbaru"
6. Save!

Komentar Terbaru: Kutipan Isi plus Nama Komentator

1. Layout > Add a Gadget > HTM/Javascript
2. Isi judul dengan "Komentar Terbaru"
3. Copas kode berikut ini di kotak isi:

<script style=text/javascript>
function showrecentcomments(json){for(var i=0;i<a_rc;i++){var b_rc=json.feed.entry[i];var c_rc;if(i==json.feed.entry.length)break;for(var k=0;k<b_rc.link.length;k++){if(b_rc.link[k].rel=='alternate'){c_rc=b_rc.link[k].href;break;}}c_rc=c_rc.replace("#","#");var d_rc=c_rc.split("#");d_rc=d_rc[0];var e_rc=d_rc.split("/");e_rc=e_rc[5];e_rc=e_rc.split(".html");e_rc=e_rc[0];var f_rc=e_rc.replace(/-/g," ");f_rc=f_rc.link(d_rc);var g_rc=b_rc.published.$t;var h_rc=g_rc.substring(0,4);var i_rc=g_rc.substring(5,7);var j_rc=g_rc.substring(8,10);var k_rc=new Array();k_rc[1]="Jan";k_rc[2]="Feb";k_rc[3]="Mar";k_rc[4]="Apr";k_rc[5]="May";k_rc[6]="Jun";k_rc[7]="Jul";k_rc[8]="Aug";k_rc[9]="Sep";k_rc[10]="Oct";k_rc[11]="Nov";k_rc[12]="Dec";if("content" in b_rc){var l_rc=b_rc.content.$t;}else if("summary" in b_rc){var l_rc=b_rc.summary.$t;}else var l_rc="";var re=/<\S[^>]*>/g;l_rc=l_rc.replace(re,"");document.write('<div class="rcw-comments">');if(m_rc==true)document.write('On '+k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');document.write('<span class="author-rc"><a href="'+c_rc+'">'+b_rc.author[0].name.$t+'</a></span> commented');if(n_rc==true)document.write(' on '+f_rc);
if(o_rc==0){
document.write('</div>');
}
else{
document.write(': ');if(l_rc.length<o_rc){document.write('<i>&#8220;');document.write(l_rc);document.write('&#8221;</i></div>');}else{document.write('<i>&#8220;');l_rc=l_rc.substring(0,o_rc);var p_rc=l_rc.lastIndexOf(" ");l_rc=l_rc.substring(0,p_rc);document.write(l_rc+'&hellip;&#8221;</i></div>');document.write('');}
}
}
}
</script>
<script style=text/javascript>
var a_rc = 5;
var m_rc = false;
var n_rc = true;
var o_rc = 100;
</script>
<script src=/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-top: 7px!important;
padding-bottom: 7px!important;
}
</style>

4. Save!


Komentar Terbaru: Kutipan Isi, Nama, dan Foto Komentar

1. Layout > Add a Gadget > HTM/Javascript
2. Isi judul dengan "Komentar Terbaru"
3. Copas kode berikut ini di kotak isi

<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_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;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_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 = 5,
showAvatar = true,
avatarSize = 30,
characters = 60,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://html-scripts.googlecode.com/files/rcentcmmntavr.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

4, Save!
Kini widget komentar terbaru Anda sudah muncul, berupa nama komentator, kutipan isi, dan foto avatar Google Plus. Good Luck!

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

11 comments on Widget Komentar Terbaru plus Gambar (Foto) Komentator

  1. Saya belum wajib pakai widget komentar, karena blog saya masih sepi pengunjung hehe

    ReplyDelete
    Replies
    1. Justru buat memancing komentar, pasang aja :)

      Delete
    2. Terlebih lagi untuk menambah Related Posts (yang ada dibawah postingan blog atau single post)! Ah semakin betah pengunjung untuk berlama-lama di blog kita :D

      Delete
  2. Mastah CB, maaf numpang nanya, apa widget komentar terbaru yang disertai foto komentator tidak menambah beban loading blog? Terima kasih..

    ReplyDelete
    Replies
    1. ya, tambah beban, jangan pasang jika blog Anda lemot :)

      Delete
    2. Iya mas nambah beban. Setiap widget yang ditambahkan baik itu popular posts, recent comments, gambar header blog dll tentu akan menambah loading blog. Contoh kasusnya yaitu ketika saya nambah gambar header blog untuk blog saya beberapa waktu lalu.

      Awalnya begini, Page Speed Grade : 87% (B) dan YSlow Grade : 91% (A) dan setelah saya nambah gambar header blog menjadi Page Speed Grade : 87% (B) dan YSlow Grade : 89% (B). YSlow Grade jatuh 2%.
      Itu pengukuran GTMetrix dot com ya. Semoga membantu :D

      Delete
  3. ijin nyoba ya mas caranya diatas, haha keren, cuman baik gak ya dimata google? jika berkenan mohon di jawab ya :)

    ReplyDelete
    Replies
    1. ya baik, karena itu termasuk navigasi link

      Delete
  4. Jadi berat Loading nya

    ReplyDelete
    Replies
    1. jangan pasang kalo berat, risikonya memang jadi berat karena pake javascript...

      Delete

Contact Form

Name

Email *

Message *