Light Stylish Recent Comments Widget

By Unknown

Wednesday, October 22, 2014

Recent Comments Widget untuk blogspot yang sangat ringat dan tampilan indah sepertinya memang pantas disejajarkan dengan widget-widget hebat lainnya :D

Untuk memasang widget komentar terbaru blogger ini, cukup tambah widget HTML kemudian copy dan paste script berikut ini kedalamnya kemudian save, dan hasilnya wow ... memuaskan he he :D

<!--:[ RECENT COMMENT WITH AVATAR STAR ]:-->
<style type="text/css">
ul.recent_comments_widget{list-style:none;margin:0;padding:0;text-align:left;}
.recent_comments_widget li,.sidebar ul li{display:block;clear:both;overflow:hidden;list-style:none;}
.recent_comments_widget li .avatarImage{float:left;margin:0 5px 0 0;padding:2px;background:none;position:relative;overflow:hidden;}
.avatarRound{border-radius:50%;}
.recent_comments_widget li img{padding:0px;position:relative;overflow:hidden;display:block;}
.recent_comments_widget li span{margin-top:5px;color:#666;display:block;font-size:12px;font-style:italic;line-height:1.4;}
.recent_comments_widget span{display:none;}

.recent_comments_widget li{background:#eee;margin:0 0 5px;padding:5px;border-bottom:2px solid #ddd;box-shadow:0 1px 4px #eee;list-style:none;position:relative;counter-increment:num;}
.recent_comments_widget li:before{color:inherit;font-size:12px;font-weight:700;text-decoration:none;}
.recent_comments_widget li:before{background-color:#ddd;color:#000;content:counter(num);display:block;width:30px;height:30px;line-height:30px;position:absolute;right:0;text-align:center;bottom:0;z-index:1;}
</style>

<script type="text/javascript">
var numComments = numComments || 10,
avatarSize = avatarSize || 50,
characters = characters || 100,
defaultAvatar = defaultAvatar || "http://www.gravatar.com/avatar/?d=mm",
moreLinktext = moreLinktext || " More &raquo;",
showAvatar = (typeof showAvatar === 'undefined') ? true: showAvatar,
showMorelink = (typeof showMorelink === 'undefined') ? false: showMorelink,
roundAvatar = (typeof roundAvatar === 'undefined') ? true: roundAvatar,
hideCredits = (typeof hideCredits === 'undefined') ? false: roundAvatar;
function recent_comments_widget(md) {
	var commentsHtml;
	commentsHtml = '<ul class="recent_comments_widget">';
	for (var i = 0; i < numComments; i++) {
		var commentlink, authorName, authorAvatar, avatarClass;
		if (i == md.feed.entry.length) break;
		commentsHtml += "<li>";
		var entry = md.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 (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/b16-rounded.gif") != -1) {
			authorAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFGUUvZQjrPbT5q34t1_sp6ICzklwxLyXtjl3bqyFtQVS-7C_KLZMG4WFg46PE499Ym39uqWfI62Fb5uQu3C4xcpdhuZzJLZT9RVw-CMaZmzR3ZQfA7Yq4A19u-0ywG3Xxeb6XzDvGIAet/" + avatarSize + "/md_blogger_logo.png"
		} else if (authorAvatar.indexOf("blogblog.com/img/openid16-rounded.gif") != -1) {
			authorAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDpD5KBejJUyzqSIjIZijzp9W0JmyhC5PjW_MRbGUCbvKf5N8990ii1UG_MGt9JRQpU_OvGx_DTTmaOf2PwJ0AU9OrG5GLqmZ_p81ffUndX7yfa2ZsszYTvBYRZ6DChA-9XjK6bE85lqpe/" + avatarSize + "/md_openid_logo.png"
		} 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 += "<a rel='nofollow' href=\"" + commentlink + "\">" + authorName + "</a>";
		var commHTML = entry.content.$t;
		var commBody = commHTML.replace(/(<([^>]+)>)/ig, "");
		if (commBody != "" && commBody.length > characters) {
			commBody = commBody.substring(0, characters);
			commBody += "&hellip;";
			if (showMorelink == true) {
				commBody += "<a rel='nofollow' href=\"" + commentlink + "\">" + moreLinktext + "</a>"
			}
		} else {
			commBody = commBody
		}
		commentsHtml += "<span>" + commBody + "</span>";
		commentsHtml += "</li>"
	}
	commentsHtml += '</ul>';
	var hideCSS = "";
	if (hideCredits == true) {
		hideCSS = "display:none;"
	}
	commentsHtml += "";
	document.write(commentsHtml)
}
</script>

<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var numComments = 5,
showAvatar = true,
avatarSize = 50,
roundAvatar = false,
characters = 50,
showMorelink = true,
moreLinktext = "More &raquo;",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>

<script src="/feeds/comments/default?alt=json&amp;callback=recent_comments_widget&amp;max-results=5" type="text/javascript"></script>
<!--:[ RECENT COMMENT WITH AVATAR END ]:-->

Share :

Facebook Twitter Google+