Recent Comments Widget Blogger

Recent Comments widget untuk blogger Blogspot. Jom terus ke tutorial Recent Comments widget yang simple flat, minimal dan clean untuk para blogger Blogspot ini.

bagi template file yang install sebelum 11 March 2016, sila pastikan anda follow tutorial INI dahulu

untuk demo, info dan tutorial lebih lengkap, rujuk video ini

hanya working di Thesis Template 3.1

---

Step 1

---

Copy code dibawah, kemudian pastekannya di sidebar layout anda, melalui widget HTML/Javascript.

*sila tukar alamat blog alamat blog yang kami warnakan oren tersebut kepada alamat blog anda.

<div class="recent_comments"><script style=text/javascript>var m_rc = false,

//-----------------:   SETTING BOX   :---------------------*
//                                                         |
  ll = 'http://www.thesisblogger.com', // domain tanpa '/' |
  a_rc = 5,    // change number of comments                |
  n_rc = true, // true jika nak tajuk, false jika xnak     |
  o_rc = 100;  // jumlah aksara comment orang              |
//                                                         |
//---------------------------------------------------------*

document.write('<script type=\"text/javascript\" src=\"'+ll+'/feeds/comments/default?alt=json-in-script&callback=showrecentcomments\"><\/script>');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=t.indexOf("#"),l=t.substring(s+1).replace("c","#comment-"),o=t.substring(0,t.indexOf("?")),u=o+l,m=c.replace(/-/g," ");m=m.link(u);var d=n.published.$t,v=(d.substring(0,4),d.substring(5,7)),f=d.substring(8,10),p=new Array;if(p[1]="Jan",p[2]="Feb",p[3]="Mar",p[4]="Apr",p[5]="May",p[6]="Jun",p[7]="Jul",p[8]="Aug",p[9]="Sep",p[10]="Oct",p[11]="Nov",p[12]="Dec","content"in n)var w=n.content.$t;else if("summary"in n)var w=n.summary.$t;else var w="";var g=/<\S[^>]*>/g;if(w=w.replace(g,""),document.write('<div class="rcw-comments">'),1==m_rc&&document.write("On "+p[parseInt(v,10)]+" "+f+" "),document.write('<span class="author-rc"><a href="'+u+'">'+n.author[0].name.$t+"</a></span> commented"),1==n_rc&&document.write(" on "+m),0==o_rc)document.write("</div>");else if(document.write(": "),w.length<o_rc)document.write("<i>&#8220;"),document.write(w),document.write("&#8221;</i></div>");else{document.write("<i>&#8220;"),w=w.substring(0,o_rc);var b=w.lastIndexOf(" ");w=w.substring(0,b),document.write(w+"&hellip;&#8221;</i></div>")}}}</script></div>

---

Step 2

---

Copy code CSS dibawah, kemudian pastekannya di CUSTOM CSS (Blogger Template Desinger).

*klik sini untuk ketahui dimana letaknya CUSTOM CSS anda.

/*--: THESIS RECENT COMMENTS :--*/
.custom .recent_comments{margin-bottom:17px;font-size: 14px;counter-reset:my-badass-counter;display:list-item}.custom .rcw-comments{padding:5px 0px 6px 30px;list-style:none;list-style-image:none;clear:left;border-bottom:dotted 1px #DDD;box-sizing:border-box;text-decoration:none;letter-spacing:-.2px;text-transform:lowercase;color:#495c23}.custom .rcw-comments:before{content:counter(my-badass-counter);counter-increment:my-badass-counter;display:inline-block;float:left;position:relative;margin-left:-25px;color:#a6a6a6;font-weight:700;font-family:'Hammersmith One',Arial,Helvetica,Tahoma,sans-serif}.custom .recent_comments a{text-decoration:none;color:#ff600d;letter-spacing:-1px;text-transform:lowercase;font-weight:700}.custom .recent_comments i{font-style:normal}

Done, dan lihat hasilnya.

---

Ciri-ciri widget recent comments

---

1. Anda boleh setting, nak Post Title muncul atau tidak

2. Boleh set berapa jumlah komen

3. Boleh set jumlah aksara comment text .

4. Simple flat, minimal clean look design. Laju load.