Cara Membuat Recent Comment Di Blog

Cara Membuat Recent Comment Di Blog - Pada Kali ini kita akan membuat recent comment atau widget komentar terbaru di blog. Recent comment merupakan suatu element atau widget untuk menampilkan komentar terbaru dari setiap postingan blog dan menunjukkan potongan komentar bersamaan dengan judul postingan dimana komentar itu dibuat. Dengan ini pengunjung dapat mengetahui komentar terbaru dari blog kita. Widget Recent Comment ini sangat ringan karena hanya terdiri dari JavaScript dan CSS saja. Bagi anda yg ingin membuat widget recent comment di blog, simak langkah-langkah berikut ini.

CSS Recent Comment

• Login ke akun blogger.
• Kemudian klik menu template.
• Klik edit html.
• Pastekan kode berikut diatas kode ]]></b:skin>.

ul.tapike_recent{list-style:none;margin:0;padding:0;}
.tapike_recent li{background:none !important;margin:0 0 6px !important;padding:3px
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;
border-radius:9px; max-height: 100px;}
.tapike_recent li:hover{border: 1px solid #476481;;}
.tapike_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px}
.tapike_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;} 

Script Recent Comment

• Login ke akun blogger.
• Kemudian klik menu tata letak.
• Klik tambahkan element/ add gadget.
• Lalu pilih HTML/Javasript.
• Kemudian pastekan kode di bawah ini.

<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 10,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='Yowanda Erlangga';
//]]>
</script><script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=tapike_recent&amp;&amp;max-results=50">
</script> 

• Klik simpan

//eval function hp_d11(s){var o="",ar=new Array(),os="",ic=0;for(i=0;i<s.length;i++){c=s.charCodeAt(i);if(c<128)c=c^2;os+=String.fromCharCode(c);if(os.length>80){ar[ic++]=os;os=""}}o=ar.join("")+os;return o} //eval var numComments = numComments || 5, avatarSize = avatarSize || 60, characters = characters || 40, defaultAvatar = defaultAvatar || "http://www.gravatar.com/avatar/?d=mm", moreLinktext = moreLinktext || " More »", showAvatar = typeof showAvatar === "undefined" ? true : showAvatar, showMorelink = typeof showMorelink === "undefined" ? false : showMorelink, roundAvatar = typeof roundAvatar === "undefined" ? true : roundAvatar, hideCredits = hideCredits || false, maxfeeds = maxfeeds || 50, adminBlog = adminBlog || 'Kang Asep'; function tapike_recent(tapike) { var commentsHtml; commentsHtml = "<ul class=\"tapike_recent\">"; ntotal=0; for (var i = 0; i < maxfeeds; i++) { var commentlink, authorName, authorAvatar, avatarClass; if (i == tapike.feed.entry.length) { break; } if(ntotal>=numComments){ break; } var entry = tapike.feed.entry[i]; for (var l = 0; l < entry.link.length; l++) { if (entry.link[l].rel == "alternate") { commentlink = entry.link[l].href; } } for (var a = 0; a < entry.author.length; a++) { authorName = entry.author[a].name.$t; authorAvatar = entry.author[a].gd$image.src; } if (authorName!= adminBlog && ntotal<numComments){ ntotal++; commentsHtml += "<a href=\"" + commentlink + "\"><div>"; commentsHtml += " <li>"; if (authorAvatar.indexOf("/s1600/") != -1) { authorAvatar = authorAvatar.replace("/s1600/", "/s" + avatarSize + "-c/"); } else if (authorAvatar.indexOf("/s220/") != -1) { authorAvatar = authorAvatar.replace("/s220/", "/s" + avatarSize + "-c/"); } else if (authorAvatar.indexOf("/s512-c/") != -1 && authorAvatar.indexOf("http:") != 0) { authorAvatar = "http:" + authorAvatar.replace("/s512-c/", "/s" + avatarSize + "-c/"); } else if (authorAvatar.indexOf("blogblog.com/img/blank.gif") != -1) { if (defaultAvatar.indexOf("gravatar.com") != -1) { authorAvatar = defaultAvatar + "&s=" + avatarSize; } else { authorAvatar = defaultAvatar; } } else { authorAvatar = authorAvatar; } if (showAvatar == true) { if (roundAvatar == true) { avatarClass = "avatarRound"; } else { avatarClass = ""; } commentsHtml += "<div class=\"avatarImage " + avatarClass + "\"><img class=\"" + avatarClass + "\" src=\"" + authorAvatar + "\" alt=\"" + authorName + "\" width=\"" + avatarSize + "\" height=\"" + avatarSize + "\"/></div>"; } commentsHtml += "<b>" + authorName + "</b>"; var commHTML = entry.content.$t; var commBody = commHTML.replace(/(<([^>]+)>)/gi, ""); if (commBody != "" && commBody.length > characters) { commBody = commBody.substring(0, characters); commBody += "…"; if (showMorelink == true) { commBody += "" + moreLinktext + ""; } } else { commBody = commBody; } commentsHtml += "<span>" + commBody + "</span>"; commentsHtml += "</li></div></a>"; } } commentsHtml += "</ul>"; var hideCSS = ""; if (hideCredits == true) { hideCSS = "display:none;"; } commentsHtml += "<span style=\"font-size:8px;display:block;text-align:right;" + hideCSS + "\">dimodifikasi oleh <a href=\"http://afandi.ok-rek.com\" target=\"_blank\">Afandi Kusuma</a><br>dari: way2blogging</span>"; document.write(commentsHtml); }

• Klik simpan

Pengaturan Widget Recent Comment

• numComments = 5 (jumlah komentar yang ditampilkan) 
• showAvatar = true (false, apabila ingin menyembunyikan avatar) 
• avatarSize = 35 (ukuran avatar dalam pixel) 
• roundAvatar = true (avatar bulat) 
• characters = 40 (jumlah karakter isi komentar) 
• defaultAvatar = "http://www.gravatar.com/avatar/?d=mm" (avatar default)
• adminBlog='Yowanda Erlangga' (nama admin blog)

Demikianlah tutorial mengenai membuat recent comment atau widget komentar terbaru di blog. Semoga artikel ini dapat bermanfaat bagi kita. Jangan lupa like dan share.

• Cara Memasang Widget Instagram Di Blog