Tạo nhận xét mới nhất Recent Comments có Avatar đẹp cho Blogger

Chào các bạn ! hôm nay iChiaSe Blog's sẽ hướng dẫn các bạn một thủ thuật Blogger mà rất Blogger hiện nay đang sử dụng. Đó là " Tiện ích nhận xét mới nhất Recent Comments có Avatar đẹp cho Blogger ". Giới thiệu 1 chút về chức năng của Widget này nhé :

1. Tự động hiển thị avatar cho nhận xét của tài khoản Blogger và avatar mặc định cho nhận xét của người không có avatar.
2. Thêm trích đoạn nội dung của nhận xét.
3. Tự động phân biệt nhận xét của Admin.
4. Load nhanh

Và bây giờ mình sẽ hướng dẫn các bạn tạo một Widget hay 1 trang nhận xét mới.

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]></b:skin> trong template của bạn.

.recent-comment{line-height: 1.4;
color: #000000;
margin: 0;
height: 86px;}
.recent-comment img {
margin: 5px 11px 0 11px;
padding: 1px;
border: 1px solid #ccc;
background: #fff;
height: 60px;
float: left;
width: 60px;
}
.recent-comment img:hover{-moz-transform:rotate(7deg);-o-transform:rotate(7deg);-webkit-transform:rotate(7deg);-ms-transform:rotate(15deg)}.recent-comment a{font-size:11px;color: #000!important;}span.recent-comment-author a{margin:3px 0 0 0;font-size:12px;color:#778686;font-weight:bold}.recent-comment-author a:hover{color:#fff}.cm-line{border-top: 1px solid #F1E5E5}.cmdelete{margin:8px 0 0 0;color:#888}
#related-post h4 {
font-size: 26px;
margin-bottom: 10px;
color: #000;
font-family: Cambria;
font-weight: normal;
border-left: 9px solid #0f8528;
margin: 10px;
padding: 5px;
}

Bước 2: Tùy blog của bạn mà bạn có thể dán đoạn code dưới đây vào một trang riêng biệt  hay 1 widget hiển thị trên trang chủ.
Nếu bạn muốn tạo một trang như Blog của mình: Vào Trang -> Trang mới -> Chế độ HTML ->  Dán code, sau đó tạo tiêu đề tùy ý.
Mặt khác nếu bạn muốn tạo một widget hiển thị trên Trang chủ: Vào Bố cục (Chọn nơi muốn tạo) -> HTML/Javascript -> Dán đoạn code bên dưới, tạo tiêu đề rồi lưu lại.


Đây là code của tiện ích này.

<script type='text/javascript'>//<![CDATA[
var cm_num = 5;
var cm_sum = 13;
var cm_ava = new Array();
cm_ava=[];cm_ava.openid="https://lh3.googleusercontent.com/-_W6HGIdPV_o/UmDuLmQ05_I/AAAAAAAAAGw/0m_Uj1NjFlo/s50/openid.png";cm_ava.livej="https://lh4.googleusercontent.com/-AS4Os30VEXI/UmDuLrcRRFI/AAAAAAAAAGs/D7WFxGyIWsA/s50/livej.png";cm_ava.wp="https://lh5.googleusercontent.com/-Y7lkmCAjAUw/UmDuKRy3VmI/AAAAAAAAAGc/ttHyvvQ3HB8/s128/5be6e875182ebc595c85dd74dddc248a.jpg";cm_ava.typepad="https://lh3.googleusercontent.com/-qKrCfz9RyX0/UmDuL6r3eCI/AAAAAAAAAG0/8gvQ8UEOmbg/s50/typepad.png";cm_ava.aim="https://lh6.googleusercontent.com/-SsYvcVeh7TU/UmDuKT48F0I/AAAAAAAAAGU/qvWeUa6DP00/s50/aim.png";cm_ava.url="https://lh5.googleusercontent.com/-ZQwkrJXsDDI/UmDuMkk6llI/AAAAAAAAAG8/b6VkUNGpgeM/s50/url.png"; cm_ava.anon="https://lh5.googleusercontent.com/-C-Nf-EcX75E/UmDuKU47VsI/AAAAAAAAAGY/FM6_P7Eyagw/s50/guest.png";
function stripcmHtmlTags(a,d){a=a.replace(/<br.*?>/ig," ");return a.replace(/<.*?>/ig,"").split(/\s+/).slice(0,d-1).join(" ")} function showRCommentsAvatar(a){for(var a=a.feed.entry,d="",h=[1,2,3,4,5,6,7,8,9,10,11,12],c=0;c<cm_num;c++){var b="";if("uri"in a[c].author[0]){var b=a[c].author[0].uri,f='<a alt="'+a[c].author[0].name.$t+'" title="'+a[c].author[0].name.$t+'" href="">'+a[c].author[0].name.$t+"</a>";b.$t.match("blogger.com")?(b=a[c].author[0].gd$image.src,b=-1!=b.indexOf("blogblog.com")?"http://traidatmuidotcom.appspot.com/background/blogger-nophoto.png":b):b=b.$t.match("openid.net")?cm_ava.openid:b.$t.match("livejournal.com")?cm_ava.livej:b.$t.match("wordpress.com")?cm_ava.wp: b.$t.match("typekey.com")?cm_ava.typepad:b.$t.match("aol.com")?cm_ava.aim:cm_ava.url}else b=cm_ava.anon,f=""+a[c].author[0].name.$t+"";for(var e=a[c].published.$t,i=parseInt(e.substring(5,7)),g=0;g<h.length&&i!=h[g];g++);d=""==a[c].title.$t?d+('<div class="recent-comment"><img alt="'+a[c].author[0].name.$t+'" title="'+a[c].author[0].name.$t+'" src="'+b+'" /><span class="recent-comment-author">'+f+'</span><div class="cmdelete"><strike>'+a[c].content.$t+'</strike></div></div><div class="cm-line"></div><div class="clear"></div>'):d+('<div class="recent-comment"><img alt="'+a[c].author[0].name.$t+'" title="'+a[c].author[0].name.$t+'" src="'+b+'" /><span class="recent-comment-author"><a alt="'+a[c].author[0].name.$t+'" title="'+a[c].author[0].name.$t+'" href="'+a[c].link[2].href+'">'+a[c].author[0].name.$t+'</a></span> - <i><a href="'+a[c].link[2].href+'">'+e.substring(11,16)+"-"+e.substring(8,10)+"/"+e.substring(5,7)+"/"+e.substring(2,4)+"</a></i><br/>"+stripcmHtmlTags(a[c].content.$t,cm_sum)+' ... </div><div class="cm-line"></div><div class="clear"></div>')}document.write(d)}document.write('<script type="text/javascript" src="http://www.blogger.com/feeds/953684352732760808/comments/default?max-results='+cm_num+'&alt=json-in-script&callback=showRCommentsAvatar"><\/script>');
//]]>
</script>

Trong đoạn code trên các bạn sửa phần màu đỏ thành ID blog của bạn nhé "953684352732760808"
Demo các bạn xem trực tiếp tại Website của mình nhé! " Widget Nhận Xét mới ". 
Chúc các bạn thành công!

Nguồn : iChiaSe.Biz

Tag : Thủ Thuật Blogger