Khác với những kiểu nhận xét gần đây nhất truyền thống các bài viết được hiển thị trên một widget do vậy nó thường không được người ta để ý đến. Thủ thuật ngày hôm nay namkna giới thiệu được viết bởi tác giả DHF với những tính năng mới mà các bạn có thể gặp lần đầu. Nói nôm na khi có nhận người truy cập vào blog sẽ có một biểu tượng thông báo số lượng comment mới trên blogger cho họ. Khi bấm vào biểu tượng đó thì sẽ hiện ra danh sách nhận xét dạng popup.

Dưới đây là hình ảnh minh họa của thủ thuật này:

Bạn có thể xem blog demo:

» XEM DEMO


☼ Thêm mã Jquery
Các bạn thêm mã bên dưới vào trước thẻ<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

☼ Điểm mới của tiện ích Thông báo nhận xét mới trên blogger:

» Thông báo nhận xét luôn trên đầu blog (giống như trên trang facebook).
» Đếm nhận xét dựa trên cookie nên chỉ hiện số lượng comment tính từ lần truy cập gần nhất vào trang của bạn trên máy đó. Do vậy với những người truy cập lần đầu tiên vào trang của bạn con số có thể hơi lớn nên bạn đừng có lo nha :).
» Khả năng tùy biến của tiện ích này khá cao, dễ dàng tùy biến để mang lại phong cách riêng cho cá nhân cua mỗi người.

☼ Thêm icon thông báo nhận xét mới nhất cho blogger.

1- Đăng nhập vào blog
2- Chọn mẫu (Templte) +> Tiếp tục chọn Chỉnh sửa HTML (Edit HTML).
3- Dán đoạn code bên dưới vào trước đoạn ]]></b:skin> trong mẫu của bạn. 
/* Notifikasi Komentar
----------------------------------------------- */
#notif {cursor:pointer;}
#notif:before {
  content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7aykvgqd-uQRUuFQxz3p8aL6OjBoEtxZtB9O6a66NtRdqO3555wA0zT9HyY50EmLu6oqwnuSlP4G6tyDRQXlY1_a_RQPRlRtymx8bePN8v-605BPV-EOCj8Ar-9aEhaalQGMMcMdJQTc/s320/comment.png');
  border:1px solid #b6b5b5;
  padding:5px 6px 0 6px;
  border-radius:3px;
  display:block;
  position:fixed;
  top:15px;
  right:295px;
  z-index:9997;
  transition:all 0.4s ease-out;
}
#notif:hover:before {opacity:.5;}
#show-total {
  position:fixed;
  top:8px;
  right:285px;
  z-index:9999;
  cursor:pointer;
  float:right;
}
.total-show {
  background-color:#f1c40f;
  color:white;
  padding:2px 6px;
  font-size:11px;
  border-radius:4px;
  font-weight:bold;
}
#cm-wrapper {
  width:352px;
  position:fixed;
  top:45px;
  right:-381px;
  z-index:9999;
  transition:0.5s ease;
}
#cm-wrapper .bubble {
  position:absolute;
  z-index:300;
  width:0;
  height:0;
  border-width:14px;
  border-style:solid;
  top:-6px;
  left:25px;
  border-color:transparent transparent rgb(211,211,211) !important;
}
#cm-scroll {
  width:100%;
  overflow:hidden;
  position:relative;
}
#comments-container {
  height:530px;
  margin:-18px -300px 0 0;
  padding-right:280px;
  padding-left:10px;
  overflow:auto;
  color:#666;
  font-family:Arial,Sans-serif;
  background:#e4e4e4;
  background:-moz-linear-gradient(top,#e4e4e4 0%,#e7e7e7 20%,#eaeaea 37%,#f1f1f1 52%,#eaeaea 69%,#e7e7e7 88%,#e4e4e4 99%);
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e4e4e4),color-stop(20%,#e7e7e7),color-stop(37%,#eaeaea),color-stop(52%,#f1f1f1),color-stop(69%,#eaeaea),color-stop(88%,#e7e7e7),color-stop(99%,#e4e4e4));
  background:-webkit-linear-gradient(top,#e4e4e4 0%,#e7e7e7 20%,#eaeaea 37%,#f1f1f1 52%,#eaeaea 69%,#e7e7e7 88%,#e4e4e4 99%);
  background:-o-linear-gradient(top,#e4e4e4 0%,#e7e7e7 20%,#eaeaea 37%,#f1f1f1 52%,#eaeaea 69%,#e7e7e7 88%,#e4e4e4 99%);
  background:-ms-linear-gradient(top,#e4e4e4 0%,#e7e7e7 20%,#eaeaea 37%,#f1f1f1 52%,#eaeaea 69%,#e7e7e7 88%,#e4e4e4 99%);
  background:linear-gradient(to bottom,#e4e4e4 0%,#e7e7e7 20%,#eaeaea 37%,#f1f1f1 52%,#eaeaea 69%,#e7e7e7 88%,#e4e4e4 99%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4',endColorstr='#e4e4e4',GradientType=0 );
  out-line:none;
  border-top:1px solid #fff;
  border-radius:0 0 0 6px;
  -webkit-border-radius:0 0 0 6px;
  -moz-border-radius:0 0 0 6px;
  -moz-box-shadow:0 0 2px rgba(255,255,255,0.6) inset,0 2px 2px rgba(0,0,0,0.2);
  -webkit-box-shadow:0 0 2px rgba(255,255,255,0.6) inset,0 2px 2px rgba(0,0,0,0.2);
  box-shadow:0 0 2px rgba(255,255,255,0.6) inset,0 2px 2px rgba(0,0,0,0.2);
}
#cm-scroll h4 {
  font-size:14px;
  font-weight:bold;
  color:#535252;
  text-shadow:0 1px 0 #e5e5e5;
  background:#d3d3d3;
  background:-moz-linear-gradient(top,#d3d3d3 0%,#c3c3c3 52%,#b3b3b3 99%);
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#d3d3d3),color-stop(52%,#c3c3c3),color-stop(99%,#b3b3b3));
  background:-webkit-linear-gradient(top,#d3d3d3 0%,#c3c3c3 52%,#b3b3b3 99%);
  background:-o-linear-gradient(top,#d3d3d3 0%,#c3c3c3 52%,#b3b3b3 99%);
  background:-ms-linear-gradient(top,#d3d3d3 0%,#c3c3c3 52%,#b3b3b3 99%);
  background:linear-gradient(to bottom,#d3d3d3 0%,#c3c3c3 52%,#b3b3b3 99%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3d3d3',endColorstr='#b3b3b3',GradientType=0 );
  font-weight:900;
  padding:12px 25px;
  border-bottom:1px solid #999;
  color:#535252;
  text-shadow:0 1px 0 #dedede !important;
  border-radius:6px 0 0 0;
  -webkit-border-radius:6px 0 0 0;
  -moz-border-radius:6px 0 0 0;
  -moz-box-shadow:inset 0 1px 0 0 #ffffff;
  -webkit-box-shadow:inset 0 1px 0 0 #ffffff;
  box-shadow:inset 0 1px 0 0 #ffffff;
  font-weight:900 !important;
}
#cm-wrapper #cm-close {
  position:absolute !important;
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5vRBXfsK9gWhWMuqCTfag8QQOFUbmmHL7pPnlmMZlvP0c-KA6MbGNesclhEhTPVFbPAdvmaiBskVtvHJx9M51f7L3merp9Wqmn3sjFRlaepRoGWHtiLKdCFxuTGlSU6GzrKtuQW7iGYQx/s1600/close-spirt-namkna.png);
  background-repeat:no-repeat;
  width:29px;
  height:29px;
  overflow:hidden;
  text-indent:10em;
  top:28px;
  right:10px;
  background-position:0 0 !important;
  cursor:pointer;
}
#comments-container.cm-active {
  position:fixed;
  right:0;
  top:61px;
}
.cm-outer {
  margin:0 auto;
  padding:0;
  font-size:11px;
  text-align:left;
}
.cm-outer pre {
  background-color:#141414;
  font-size:11px;
  color:#7c7c7c;
}
.cm-outer li {
  padding:7px 10px 12px;
  list-style:none;
  clear:both;
  position:relative;
  background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1NnkHIL036EZ9mqBXca4MFeBNcWcyPL6EDrCWpXacSTnIl4OO0NuCbRc-vZ_9c8BVECiAMMbWqIGkgMXZwekjj-0cNQLgl4tcKZbnIiA1qavmsZG-JvLTmN5nWbW0VeDqIAjM6GAnsN74/s1600/bar-namkna-commentt.png') repeat-x bottom;
  margin-right:10px;
}
.cm-outer code {
  color:#a6a658;
  font-size:11px;
}
.cm-outer li.selected {border-left:4px solid #fffe8c;}
.cm-outer li:first-child {border-top:none;}
.cm-outer li:last-child {border-bottom:none;}
.cm-text {color:#999;}
.cm-outer {margin:0 0 5px;}
.cm-header {
  margin:4px 0 8px 60px;
  font-size:12px;
  font-weight:normal !important;
}
.cm-header a {
  color:#168980;
  text-decoration:none;
  font-size:12px;
  font-weight:bold;
}
.cm-header a:hover {
  color:#e6e6e6;
  text-decoration:none;
}
.cm-outer .cm-content {overflow:hidden;}
.cm-content {margin-left:60px;}
.cm-outer img {
  display:block;
  float:left;
  overflow:hidden;
  position:absolute;
  top:10px;
  left:0;
  border:3px solid #3d464f;
}
.cm-footer {margin-top:7px;}
.cm-footer a {
  color:#168980;
  text-decoration:none;
}
.cm-footer a:hover {
  color:#e6e6e6;
  text-decoration:none;
}
#cm-overlay {
  position:fixed !important;
  z-index:999;
  top:0;
  right:0;
  bottom:0;
  left:0;
  opacity:0.9;
  background-color:#111;
  display:none;
}
Trong đó:
  • top:45px; là vị trí của khung nhận xét hiện ra sau khi bấm chuột so với lề trên của blog (trình duyệt).
  • Link ảnh màu xanh chính là link ảnh button sẽ hiển thị trên blog. Bạn có thể thay đổi thành link ảnh khác nếu muốn
  • top:-6px; là vị trí của nút Riboxom phía trên khung, nếu bị đè lên khung bạn có thể chỉnh lại thuộc tính này.
  • 12px là độ rộng của phần nền tiêu đề Nhận xét mới đăng tải.
4- Tiếp theo bạn dán đoạn code bên dưới vào trước thẻ </body> trong mẫu của bạn. 
<div id='notif' title='Nhận xét mới'></div>
<div id='cm-wrapper'>
    <div class="bubble"></div>
    <div id="cm-scroll">
<h4>Nhận xét mới đăng tải!</h4>
        <div id='comments-container'>Loading&amp;hellip;</div>
        <div id="cm-close">X</div>
    </div>
</div>
<div id='show-total'></div>
<div id='cm-overlay' />
<script>
var originalTitle = document.title;
var cm_config = {
    home_page: "http://namkna.blogspot.com/",
    max_result: 20,
    t_w: 50,
    t_h: 50,
    summary: 9999,
    new_tab_link: false,
    ct_id: "comments-container",
    new_cm: "Nhận xét mới!",
    interval: 30000,
    alert: true,
    alert: function (total) {
        document.getElementById("show-total").innerHTML = '&lt;strong class=\'total-show\'&gt;' + total + '&lt;/strong&gt;';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
</script>
<script src="https://dl.dropboxusercontent.com/u/66256041/JQuery/namkna-blogspot-com/notif-new-comment.js"></script>
» Tùy biến: Các bạn có thể xem bảng bên dưới để tùy biến tiện ích này theo ý mốn của bản thân mình nha.

Các biếnNội dung và cách tùy biến
home_pageLink trang web muốn thủ thuật này hiển thị comment. Hãy thay http://namkna.blogspot.com/ thành liên kết tới trang web bạn muốn gọi các comment mới.
max_resultSố lượng comment tối đa được phép hiển thị trên tiện ích này khi bạn bấm vào thông báo. Không nên cho hiên thị quá nhiều vì nó sẽ làm chậm blog. Ở đây mình để sô lượng comment sẽ hiển thị là 20 nhận xét.
t_wLà chiều rộng của avantar người nhận xét sẽ hiên thị. Trong ví dụ này là rộng 50px.
t_hLà chiều cao của avantar người nhận xét sẽ hiên thị. Trong ví dụ này là cao 50px.
summarySố lượng ký tự mô tả của mỗi comment sẽ được phép hiển thị. Mình để là 9999 tuy nhiên bạn nên điều chỉnh lại bởi nếu comment nào quá dài nó cũng sẻ hiển thị hết như vầy sẽ rất sấu phải không nào :) .
new_tab_linkTắt hoặc mở chức năng mở liên kết trong tab mới khi bấm vào để xem comment trên ô thông báo. Trường hợp trên mình đang tắt chức năng mở liên kết trong tab mới trên trình duyệt, nếu bạn muốn bật chức năng đó thì hãy thay thế toàn bộ false thành true.
intervalĐược dùng để tính thời gian đọc lại feed, Tức là cứ sau một khoảng thời gian định trước tiện ích sẽ tiến hành lọc feed xem có nhận xét nào được đăng mới không để cập nhật vào ô thông báo. Đơn vị tính là phần nghìn giây (1 giây = 1000), Như vầy trong trường hợp này cứ sau 30 giây (30000) thì tiện ích sẽ lọc feed xem có nhận xét mới không để thông báo đến người truy cập.
alertPhần này hiện tại chức năng chưa rõ ràng nên tạm thời không bình luận về nó :)
5- Công việc của bạn lúc này là lưu mẫu lại và quay trở lại blog để xem kết quả đã thực hiện.
Nếu gặp bất kỳ khó khăn hay vướng mắc nào vui lòng comment ở bên dưới mình sẽ trả lời bạn trong thời gian xớm nhất.