Breaking

Tuesday, May 28, 2013

Home / Bendoi / Comment / Thủ Thuật BlogSpot / Blogspot comment - Nhận xét mới có Avatar (2012)

Blogspot comment - Nhận xét mới có Avatar (2012)

by on in , ,
Đây là một thủ thuật từ nước ngoài (nhiều trang đăng lại nhưng không ghi nguồn nên không biết chính xác là của tác giả nào: cybernetwebdesign, armada-seo, mybloggerblog, ...)

Với javascript đã có, nhiều người chỉ việc css lại 4 thành phần để tạo hình thức theo ý muốn đó là:
  1. Avatar - hình đại diện
  2. Username - tên người dùng
  3. Trích dẫn một phần nội dung nhận xét
  4. Link bài được nhận xét


Đây là đoạn code gốc:
<style type="text/css">
ul.latest_recent_comments {
        list-style:none;
        margin:0;
        padding:0;
}
.latest_recent_comments li {
        background:none !important;
        margin:0 0 6px !important;
        padding:0 0 6px 0 !important;
        display:block;
        clear:both;
        overflow:hidden;
        list-style:none;
}
.latest_recent_comments li .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;
}
.latest_recent_comments li img {
        padding:0px;
        position:relative;
        overflow:hidden;
        display:block;
}
.latest_recent_comments li span {
        margin-top:4px;
        color: #666;
        display: block;
        font-size: 12px;
        font-style: italic;
        line-height: 1.4;
}
.latest_recent_comments span {
        display:none;
}
</style>
<script type="text/javascript">
//<![CDATA[    // Recent Comments Settings    var    numComments     = 8,    showAvatar     = true,    avatarSize     = 60,    roundAvatar    = true,    characters     = 30,    showMorelink    = true,    moreLinktext    = "More &#65533;",    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",    hideCredits    = true;//]]>
</script>
<script src="http://yourjavascript.com/43012082112/truebloggertricks.txt.js"></script>
<script src="http://............/feeds/comments/default?alt=json&amp;callback=latest_recent_comments&amp;max-results=5" type="text/javascript"></script>
  • Để thay đổi số ý kiến ​​tìm numComments = 5,
  • Nếu bạn không muốn hiển thị avatar sau đó tìm thấy mã này showAvatar = true
  • Để thay đổi kích thước avatar tìm thấy mã này avatarSize = 40
  • Nếu bạn không muốn hiển thị avatar tròn sau đó tìm thấy mã này roundAvatar = true
  • Để thiết lập số ký tự tối đa tên người nhận xét characters = 40
  • Để hiển thị liên kết nhiều hơn tìm mã này và thay đổi giá trị là true showMorelink = false
  • Nếu bạn sử giá trị liên kết thì bạn có thể thay đổi các văn bản trong đó cho thấy link.Find hơn mã này moreLinktext = "More» "
  • Để thay đổi hình ảnh đại diện mặc định tìm mã defaultAvatar = "http://www.gravatar.com/avatar/?d=mm

Nội dung file truebloggertricks.txt.js
var numComments = numComments || 5,
        avatarSize = avatarSize || 60,
        characters = characters || 40,
        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 latest_recent_comments(md) {
        var commentsHtml;
        commentsHtml = '<ul class="latest_recent_comments">';
        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/AVvXsEgsYkAH9litcynOzW-Mtn_HviPNLJlHyViLcPNJERL402vzObl0AQuq6Sj1tmEJB-VXH8Emnvd1QwGEdINFxQybjiLotFS4bAVLOsjSMJzy67QD4snYqaprU_skuW_gpPr8zQRZ4r2V7zf-/" + avatarSize + "/md_blogger_logo.png"
                }
                else if (authorAvatar.indexOf("blogblog.com/img/openid16-rounded.gif") != -1) {
                        authorAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8HwIBifQftZnR1B2fPBvk8nNdIWNtsPpCF7s3EBIDARI0G9bi9do2GfoWIGmyPTjGjAA3VV1oJ239fVn3JqMdDdZ6EkDQq8nLU6cT9Pve6ge6c-SqGFb_Kk4zfdBsWNXK6e_pEX9jmeOi/" + 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 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 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)
}

Một dxhdesign (Việt Nam tháng 2/2013) đã edit lại phần css và thay biến phần js để xem cho gọn. Phong cách theo kiểu 'vuông vắn', lạ mắt và được nhiều người thích

<style type="text/css">
ul.latest_recent_comments {
        list-style:none;
        margin:0;
        padding:0
}
.latest_recent_comments li {
        position: relative;
        background:none !important;
        margin:7px 0 3px !important;
        padding:0 2px 5px 0 !important;
        display:block;
        clear:both;
        overflow:hidden;
        list-style:none
}
.latest_recent_comments li a {
        float:right;
        width:285px;
        font:12px Arial;
        color:#888 !important;
        background:#111;
        margin-top:9px;
        padding:11px 7px 5px;
        border:1px solid #000;
        border-right:3px solid #5390ad
}
.latest_recent_comments li a:hover {
        color:#fff !important
}
.latest_recent_comments li .avatarImage {
        float:left;
        margin:0 6px 0 0;
        position:relative;
        overflow:hidden
}
.avatarRound {
        width:34px;
        height:34px
}
.latest_recent_comments li img {
        padding:0;
        position:relative;
        overflow:hidden;
        display:block
}
.latest_recent_comments li span {
        position: absolute;
        left:42px;
        top:-3px;
        padding:3px 3px 1px;
        color:#8f887c;
        background:#333;
        display:block;
        font:12px Arial
}
.latest_recent_comments span {
        display:none
}
</style>
<script type='text/javascript'>
  var numComments = numComments || 5,
        avatarSize = avatarSize || 34,
        characters = characters || 43,
        defaultAvatar = defaultAvatar || "https://lh5.googleusercontent.com/-5YeC_6-32nw/UPb7SL-uGXI/AAAAAAAABWE/QJRpUV7G9bc/s80/personal.png",
        showAvatar = "undefined" === typeof showAvatar ? !0 : showAvatar,
        roundAvatar = "undefined" === typeof roundAvatar ? !0 : roundAvatar,
        hideCredits = "undefined" === typeof hideCredits ? !1 : roundAvatar
        function latest_recent_comments(e) {
        var t;
        t = '<ul class="latest_recent_comments">';
        for (var n = 0; n < numComments; n++) {
                var r, i, s, o;
                if (n == e.feed.entry.length) break;
                t += "<li>";
                var u = e.feed.entry[n];
                for (var a = 0; a < u.link.length; a++) {
                        if (u.link[a].rel == "alternate") {
                                r = u.link[a].href
                        }
                }
                for (var f = 0; f < u.author.length; f++) {
                        i = u.author[f].name.$t;
                        s = u.author[f].gd$image.src
                }
                if (s.indexOf("/s1600/") != -1) {
                        s = s.replace("/s1600/", "/s" + avatarSize + "-c/")
                }
                else if (s.indexOf("/s220/") != -1) {
                        s = s.replace("/s220/", "/s" + avatarSize + "-c/")
                }
                else if (s.indexOf("/s512-c/") != -1 && s.indexOf("http:") != 0) {
                        s = "http:" + s.replace("/s512-c/", "/s" + avatarSize + "-c/")
                }
                else if (s.indexOf("blogblog.com/img/b16-rounded.gif") != -1) {
                        s = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsYkAH9litcynOzW-Mtn_HviPNLJlHyViLcPNJERL402vzObl0AQuq6Sj1tmEJB-VXH8Emnvd1QwGEdINFxQybjiLotFS4bAVLOsjSMJzy67QD4snYqaprU_skuW_gpPr8zQRZ4r2V7zf-/" + avatarSize + "/md_blogger_logo.png"
                }
                else if (s.indexOf("blogblog.com/img/openid16-rounded.gif") != -1) {
                        s = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8HwIBifQftZnR1B2fPBvk8nNdIWNtsPpCF7s3EBIDARI0G9bi9do2GfoWIGmyPTjGjAA3VV1oJ239fVn3JqMdDdZ6EkDQq8nLU6cT9Pve6ge6c-SqGFb_Kk4zfdBsWNXK6e_pEX9jmeOi/" + avatarSize + "/md_openid_logo.png"
                }
                else if (s.indexOf("blogblog.com/img/blank.gif") != -1) {
                        if (defaultAvatar.indexOf("gravatar.com") != -1) {
                                s = defaultAvatar + "&s=" + avatarSize
                        }
                        else {
                                s = defaultAvatar
                        }
                }
                else {
                        s = s
                } if (showAvatar == true) {
                        if (roundAvatar == true) {
                                o = "avatarRound"
                        }
                        else {
                                o = ""
                        }
                        t += '<div class="avatarImage ' + o + '"><img class="' + o + '" src="' + s + '" alt="' + i + '" width="' + avatarSize + '" height="' +
                                avatarSize + '"/></div>'
                }
                t += "<span>" + i + "</span>";
                var l = u.content.$t;
                var c = l.replace(/(<([^>]+)>)/ig, "");
                if (c != "" && c.length > characters) {
                        c = c.substring(0, characters);
                        c += "…"
                }
                else {
                        c = c
                }
                t += '<a href="' + r + '">' + c + "</a>";
                t += "</li>"
        }
        t += "";
        document.write(t)
}
</script>
<script type="text/javascript" src="http://........../feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=5"></script>
Và tháng 5/2013 cũng có trang nước ngoài trùng ý tưởng nhưng ko ghi rõ chép từ đâu.
Ghi chú: đoạn: http://........../feeds/comments/default?... có thể bỏ đi để gọn thành /feeds/comments/default?...
Thanks:  Google, ..., truebloggertricks, cybernetwebdesign, armada-seo, mybloggerblog, dxhdesign
Author Image

About Nguyen Khoa
Soratemplates is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of templatesyard is to provide the best quality blogger templates.

Related Posts:
By at
Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)