Thông báo nhận xét mới trên blogger

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.

Xem DEMO
☼ Đ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 của 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/AVvXsEht-akg0u3_KoySYI4HLyXZfGw388eTYIElEl2OvFy46HUB9SKtzBgzMx6R0W0vtbjWAnY4IXRQr08t7wbYzWNk_6kqgNvjMO2Hl1wxMY_H9LwKLScfnGV_6HnQ5_LUn_qqoexeTPKWIsI/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(http://aqusya.googlecode.com/svn/trunk/with/image/notice-spirt.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/AVvXsEgwPX2dBUWZzjaTYhnqB8Xc4ORnVfGl1JwZqq9bIOxfdJgVIMkL25BNf8L6KAMZIBI1xg8F2dEtHOuI13ZP4w-iWNoHhE8WfVqpZrXUZHI1qooRtCIY3ftIFhYgYBIXQxXpGArCM8emym3o/s1600/batas.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;
}

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>Komentar Baru!</h4>
<div id='comments-container'>Loading&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 = '<strong class=\'total-show\'>' + total + '</strong>';
document.title = '(' + total + ') ' + originalTitle;
}
};
</script>
<script src="http://reader-hosting.googlecode.com/svn/trunk/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ến	Nội dung và cách tùy biến
home_page	Link 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_result	Số 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_w	Là 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_h	Là chiều cao của avantar người nhận xét sẽ hiên thị. Trong ví dụ này là cao 50px.
summary	Số 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_link	Tắ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 phút (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.
alert	Phầ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ó :)

Nguồn: namkna

Chuyên mục: Thu thuat, Thu thuat blogspot, thu-thuat, thu-thuat-blogger