Cara Membuat Recent Comment Di Blog

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

CSS Recent Comment Blog

• 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 Blog

• 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> 

//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} </blockquote><textarea cols="80">//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 + "\"><a href=\"http://tapike.com\" target=\"_blank\">Tapike</a></span>"; document.write(commentsHtml); }

• Klik simpan

Pengaturan Recent Comment Blog

• 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 membuat widget komentar terbaru di blog. Semoga artikel ini dapat bermanfaat bagi kita. Jangan lupa like dan share.

• Cara Memasang Widget Instagram Di Blog