Điểm đặc biệt của tiện ích này là khi bạn đang làm bất cứ việc gì trên blog của bạn mà có 1 nhận xét mới tiện ích sẽ có tab dạng popup thông báo cho bạn biết.
Các bạn có thể xem demo,trong phần demo thông báo hiển thị có 7 nhận xét đã cũ nhưng khi có nhận xét mới tiện ích sẽ cập nhật ngay.Xin lưu ý nếu truy cập trang đó lần thứ 2 nếu chưa có nhận xét mới thì sẽ không có thông báo.Muốn xem lại thì cần xóa cache hoặc đổi trình duyệt.
Xem thử:
DEMO
Để cài đặt tiện ích Recent Comment có thông báo số lượng comment mới của Blogspot đầu tiên ta thêm một tiện ích HTML/Javascript sau đó tùy chỉnh cho phù hợp với yêu cầu sở thích.
CODE
<style type="text/css" scoped="scoped"> .cm-outer { margin:0 auto; padding:0 0; font:normal normal 11px Arial,Sans-Serif; border:1px solid; border-top:none; } .cm-outer li { margin:0 0; padding:7px 10px 12px; list-style:none; clear:both; border-top:1px solid; } .cm-outer .cm-header {margin:0 0 5px} .cm-outer .cm-content {overflow:hidden} .cm-outer img { display:block; float:left; margin:2px 10px 2px 0; border:2px solid black; background:#8fa2cb url('http://img1.blogblog.com/img/anon36.png') no-repeat 50% 50%; overflow:hidden; } </style> <div id="comments-container">Loading…</div> <script type="text/javascript"> var cm_config = { home_page: "http://kartriderdautocrazy01.blogspot.com", max_result: 7,//Số lượng nhận xét được hiển thị t_w: 32,//Chiều rộng avata t_h: 32,//Chiều cao avata summary: 9999,//Số lượng ký tự nhận xét new_tab_link: true, ct_id: "comments-container", new_cm: " Nhận xét mới!", interval: 30000, alert: true }; </script> <script type='text/javascript'> //<![CDATA[ var cm_config_defaults = { home_page: "http://kartriderdautocrazy01.blogspot.com", max_result: 7, t_w: 32, t_h: 32, summary: 9999, new_tab_link: true, ct_id: "comments-container", new_cm: " Komentar Baru!", interval: 30000, alert: true }, _cookie = { set: function (g, f, j) { var i, h; if (j) { i = new Date(); i.setTime(i.getTime() + (j * 24 * 60 * 60 * 1000)); h = "; expires=" + i.toGMTString(); } else { h = ""; } document.cookie = g + "=" + f + h + "; path=/"; }, get: function (f) { var e = f + "=", h = document.cookie.split(";"), j; for (var g = 0; g < h.length; g++) { j = h[g]; while (j.charAt(0) == " ") { j = j.substring(1, j.length); } if (j.indexOf(e) == 0) { return j.substring(e.length, j.length); } } return null; }, del: function (b) { this.set(b, "", - 1); } }, tt_cm = (_cookie.get('tt_cm')) ? _cookie.get('tt_cm') : 0; for (var i in cm_config_defaults) { cm_config_defaults[i] = (typeof (cm_config[i]) !== undefined && typeof (cm_config[i]) !== 'undefined') ? cm_config[i] : cm_config_defaults[i]; } function showRecentComments(json) { var entry = json.feed.entry, total = parseInt(json.feed.openSearch$totalResults.$t, 10), // Get the comments total skeleton = "", oldCount = tt_cm, // Get the older comments total co = cm_config_defaults; // Compare the older comments total with the new comments total. // If it's greater, then => show the warning of `the new comments total` minus `the older comments total` if (oldCount < total) { if (co.alert === true) { alert((total - oldCount) + co.new_cm); } else if (co.alert === false) { document.title = '(' + (total - oldCount) + co.new_cm + ') ' + document.title; } else { co.alert((total - oldCount), co.new_cm); } } // Just a recent comments widget skeleton = '<ul class="cm-outer">'; for (var i = 0; i < entry.length; i++) { for (var j = 0; j < entry[i].link.length; j++) { if (entry[i].link[j].rel == 'alternate') { link = entry[i].link[j].href; break; } } var dash = link.lastIndexOf('/') + 1, dot = link.lastIndexOf('.'), title = link.split('-').join(" ").substring(dash, dot) + '…'; author = entry[i].author[0], name = author.name.$t, avatar = author.gd$image.src.replace(/\/s[0-9]+(\-c|\/)/, "/s" + co.t_w + "$1").replace(/http\:\/\/www.google.com\/url\?source\=imglanding(.*?)q\=/i, "").replace(/\.(jpg|jpeg|png|bmp|gif)(.*?)$/i, ".$1"), profile = (author.uri) ? author.uri.$t : "#nope", date = entry[i].gd$extendedProperty[1].value, content = ("content" in entry[i]) ? entry[i].content.$t.replace(/<(.*?)>/g, "") : "", nt = (co.new_tab_link) ? ' target="_blank"' : ''; content = (content.length > co.summary) ? content.substring(0, co.summary) + '…' : content; skeleton += '<li>'; skeleton += '<div class="cm-header"><strong><a href="' + link + '" title="' + title + '"' + nt + '>' + name + '</a>, ' + date + '</strong></div>'; skeleton += '<div class="cm-content"><a href="' + profile + '" title="' + name + '"' + nt + '><img alt="Loading..." style="width:' + co.t_w + 'px;height:' + co.t_h + 'px;" src="' + avatar + '"></a>'; skeleton += '<span class="cm-text">' + content + '</span>'; skeleton += '</div></li>'; } skeleton += '</ul>'; document.getElementById(co.ct_id).innerHTML = skeleton; _cookie.set('tt_cm', total, 7000); tt_cm = total; console.log(tt_cm); } (function () { var head = document.getElementsByTagName('head')[0], script = document.createElement('script'), co = cm_config_defaults; script.type = "text/javascript"; script.id = "cm-feed-script"; script.src = co.home_page + "/feeds/comments/default?alt=json-in-script&redirect=false&max-results=" + co.max_result + "&callback=showRecentComments"; head.appendChild(script); setInterval(function () { var newScript = document.createElement('script'); newScript.type = "text/javascript"; newScript.id = "cm-feed-script"; newScript.src = co.home_page + "/feeds/comments/default?alt=json-in-script&redirect=false&max-results=" + co.max_result + "&callback=showRecentComments"; var oldScript = document.getElementById('cm-feed-script'); oldScript.parentNode.removeChild(oldScript); head.appendChild(newScript); }, co.interval); })(); //]]> </script>Thay
Một số tùy chọn
Có một vài điều bạn nên biết về cấu hình nâng cao của tiện ích này:
Tùy chọn | Thông tin |
---|---|
home_page | Thay đổi giá trị URL của trang chủ blog của bạn |
max_result | Được sử dụng để xác định số lượng ý kiến mà sẽ được hiển thị trên widget |
t_w | Được sử dụng để xác định chiều rộng của avatar |
t_h | Được sử dụng để xác định chiều cao của avatar |
summary | Được sử dụng để xác định số lượng ký tự hiển thị của bình luận(9999 là hiển thị toàn bộ) |
new_tab_link | Nếu giá trị đúng(true), toàn bộ liên kết là trong các phụ tùng này sẽ mở ra một tab / cửa sổ mới khi nhấn vào |
ct_id | Danh sách container ID ý kiến (bỏ qua nếu không cần thiết) |
new_cm | Nhãn văn bản sẽ xuất hiện sau khi số lượng bình luận (ví dụ: 2 Các ý kiến mới!) |
interval | Thời gian làm mới dữ liệu(3000 là sau 1/2 phút) |
alert | Kiểu thông báo |
Nguồn: dte.web.id