Widget Top Commenters for Blogger
Hôm nay Iris Tips sẽ giới thiệu cho các bạn một widget mới mà blog đang sử dụng đó là tiện ích Top Commenters. Có bạn đã pm hỏi nên Iris Tips sẽ hướng dẫn chi tiết cho mọi người. Hãy cùng theo dõi bài viết dưới đây nhé.CSS
1Bạn vào Mẫu >> Chỉnh sửa HTML và thêm đoạn CSS dưới đây vào trước thẻ ]]></b:skin>.top-commenter-line img{margin-left:5px;margin-right:5px}
.top-commenter-line{margin:5px 0;border-bottom:1px solid #eee;padding:3px 5px 6px 0}
.top-commenter-line .profile-name-link{padding-left:0;font-weight:bold}
.top-commenter-avatar{vertical-align:middle;width:30px;height:30px}
.top-komeng h2{font-size:20px;padding-bottom:10px;margin-bottom:0}
.top-komeng a{color:#444}
HTML và Javascript
2Vào Bố cục >> Thêm tiện ích HTML/Javascript và dán đoạn code bên dưới vào<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet"></link>
<div class="top-komeng">
<h2>
<i class="icon-thumbs-up icon-large"></i> Top Commenters</h2>
<script type="text/javascript">
//<![CDATA[
function replaceTopCmtVars(e, t, n) {
if (!t || !t.author) return e;
var r = t.author;
var i = "";
if (r.uri && r.uri.$t != "") i = r.uri.$t;
var s = urlAnoAvatar;
var o = "http://www.blogger.com/profile/";
if (r.gd$image && r.gd$image.src && i.substr(0, o.length) == o) s = r.gd$image.src;
else {
var u = document.createElement("a");
if (i != "") {
u.href = i;
s = "http://www.google.com/s2/favicons?domain=" + u.hostname
}
} if (urlMyProfile != "" && i == urlMyProfile && urlMyAvatar != "") s = urlMyAvatar;
if (s == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "") s = urlNoAvatar;
var a = "s" + sizeAvatar;
s = s.replace(/\/s\d\d+-c\//, "/" + a + "-c/");
if (cropAvatar) a += "-c";
s = s.replace(/\/s\d\d+(-c){0,1}\//, "/" + a + "/");
var f = r.name.$t;
if (f == "Anonymous" && txtAnonymous != "" && s == urlAnoAvatar) f = txtAnonymous;
var l = '<img class="top-commenter-avatar" height="' + sizeAvatar + '" width="' + sizeAvatar + '" title="' + f + '" src="' + s + '" />';
if (i != "") l = '<a href="' + i + '">' + l + "</a>";
if (maxUserNameLength > 3 && f.length > maxUserNameLength) f = f.substr(0, maxUserNameLength - 3) + "...";
var c = f;
if (i != "") c = '<a class="profile-name-link" href="' + i + '">' + c + "</a>";
e = e.replace("[user]", c);
e = e.replace("[image]", l);
e = e.replace("[#]", n);
e = e.replace("[count]", t.count);
return e
}
function showTopCommenters(e) {
var t = 1e3 * 60 * 60 * 24;
var n = new Date;
if (urlMyProfile == "") {
var r = document.getElementsByTagName("*");
var i = /(^| )profile-link( |$)/;
for (var s = 0; s < r.length; s++)
if (i.test(r[s].className)) {
urlMyProfile = r[s].href;
break
}
}
for (var s = 0; s < e.feed.entry.length; s++) {
var o = e.feed.entry[s];
if (numDays > 0) {
var u = o.published.$t.match(/\d+/g);
var a = new Date(u[0], u[1] - 1, u[2], u[3], u[4], u[5]);
var f = Math.ceil((n.getTime() - a.getTime()) / t);
if (f > numDays) break
}
var l = "";
if (o.author[0].uri && o.author[0].uri.$t != "") l = o.author[0].uri.$t;
if (excludeMe && l != "" && l == urlMyProfile) continue;
var c = o.author[0].name.$t;
if (excludeUsers.indexOf(c) != -1) continue;
var h = o.author[0].name.$t + "-" + l;
if (topcommenters[h]) topcommenters[h].count++;
else {
var p = new Object;
p.author = o.author[0];
p.count = 1;
topcommenters[h] = p
}
}
if (e.feed.entry.length == 200) {
ndxbase += 200;
document.write('<script type="text/javascript" src="http://' + window.location.hostname + "/feeds/comments/default?redirect=false&max-results=200&start-index=" + ndxbase + '&alt=json-in-script&callback=showTopCommenters"></' + "script>");
return
}
var d = [];
for (var v in topcommenters) d.push([v, topcommenters[v]]);
d.sort(function (e, t) {
if (t[1].count - e[1].count) return t[1].count - e[1].count;
return e[1].author.name.$t.toLowerCase() < t[1].author.name.$t.toLowerCase() ? -1 : 1
});
var m = 0;
for (var s = 0; s < maxTopCommenters && s < d.length; s++) {
var g = d[s][1];
if (g.count < minComments) break;
document.write("<di" + 'v class="top-commenter-line">');
document.write(replaceTopCmtVars(txtTopLine, g, m + 1));
document.write("</d" + "iv>");
m++
}
if (!m) document.write(txtNoTopCommenters)
}
var maxTopCommenters = 10;
var minComments = 1;
var numDays = 0;
var excludeMe = true;
var excludeUsers = ["Anonymous"];
var maxUserNameLength = 42;
var txtTopLine = "<b>[#].</b> [image] [user] ([count])";
var txtNoTopCommenters = "No top commentators at this time.";
var txtAnonymous = "";
var sizeAvatar = 56;
var cropAvatar = true;
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBp7Em27KbydebDloF8wFltgUtX_VnaWa2VrGNcfPiAlRdxrCgg288zvAZdgw9fYS0m5P6zCq4A8VNwTlI5JtVo1KeUBkBEs8IOM_G_LTSTfqsMMOY1GW5tkZ9di1uGpC1ltnRN3d3HoM/" + sizeAvatar + "/avatar_blue_m_96.png";
var urlAnoAvatar = "http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=" + sizeAvatar;
var urlMyProfile = "";
var urlMyAvatar = "";
if (!Array.indexOf) {
Array.prototype.indexOf = function (e) {
for (var t = 0; t < this.length; t++)
if (this[t] == e) return t;
return -1
}
}
var topcommenters = {};
var ndxbase = 1;
document.write('<script type="text/javascript" src="http://' + window.location.hostname + '/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></' + "script>")
//]]>
</script><br /></div>
<div style='clear:both;'></div>
Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!
Bạn có code nào làm cái trang Home như blog bạn không, như thế này nè http://imageshack.com/a/img922/8305/6s2ptJ.png
Trả lờiXóaCái đó thường là gắn chắt vào template rồi bạn, khó trích ra lắm. Mình chỉ có vài cái tương tự thôi.
Xóahttp://1.bp.blogspot.com/-m84ZBUTPA6k/VfnJCBLJrRI/AAAAAAAADTg/9Qc_NzRNhEg/s1600/Randomly-shuffling-Recent-Posts.jpg
http://iris-tips.blogspot.com/2015/10/recent-post-xao-tron-bai-viet-ngau-nhien.html
http://imageshack.com/a/img923/1861/Ub9ymL.png
http://manga-easy.blogspot.com/