Tiện ích Bài viết Hot (Hot Posts Widget) là tiện ích hiển thị những bài viết được bạn đọc quan tâm và có nhiều nhận xét nhất. Tiện ích này khác với tiện ích Popular Posts hiển thị những bài viết được xem nhiều nhất.
Script trong thủ thuật sau đây sẽ lọc những bài viết được bình luận nhiều nhất trong blogspot để tạo ra tiện ích mà tôi đặt tên là Hot Posts. Tiện ích này hiển thị tiêu đề bài viết và số nhận xét cho mỗi bài viết. Thiết nghĩ đây cũng là một tiện ích cần thiết cho blogspot, bên cạnh tiện ích Popalar Posts sẵn có của Blogger.
Bạn có thể xem Demo dưới đây.
Bài viết Hot
Để cài đặt tiện ích này, bạn hãy thực hiện như sau.
Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code bên dưới vào trước thẻ </head>.
<script type='text/javascript'>
//<![CDATA[
// Hot Posts Widget styled by Huynh-nhat-ha.blogspot.com
getHP=function(d){document.write(d)};
hotPost = function(u,t,c,b) { this.url = u; this.tit = t; this.comm = c; this.body = b };
var sortAllPosts=[];
sortAllPostsRecopilation = function (json) {
var total,entry,i,x,arr,lnk,com,ttle;
total = json.feed.entry.length;
for(i=0; i < total; i++){
entry=json.feed.entry[i];
for (x=0; x < entry.link.length; x++){
arr = entry.link[x];
lnk = (arr.rel=="alternate" ? arr.href : lnk);
if(arr.rel=="replies"){
com = (arr.type=="text/html" ? parseInt(arr.title,10) : com);
}
}
ttle = entry.title.$t;
txt = ('summary' in entry ? entry.summary.$t : entry.content.$t);
sortAllPosts.push(new hotPost(lnk,ttle,com,txt));
}
sortAllPosts=sortAllPosts.OrderMaxMin();
};
Array.prototype.OrderMaxMin = function(){
var max=0;
var tmp=[];
var x,i,post;
for(i=0; i<this.length; i++){
post=this[i];
max = ( post.comm > max ? post.comm : max);
}
for(x = max; x>=0; x--){
for(i=0; i<this.length; i++){
post=this[i];
if(post.comm == x){
tmp.push(post);
}
}
}
return(tmp);
};
Array.prototype.DisplayHotPosts = function(max,txt) { for(var i=0; i<max;i++){ p=this[i]; getHP(p.tit.link(p.url)+" ("+p.comm+" nhận xét)<br/>"); }};
//]]>
</script>
//<![CDATA[
// Hot Posts Widget styled by Huynh-nhat-ha.blogspot.com
getHP=function(d){document.write(d)};
hotPost = function(u,t,c,b) { this.url = u; this.tit = t; this.comm = c; this.body = b };
var sortAllPosts=[];
sortAllPostsRecopilation = function (json) {
var total,entry,i,x,arr,lnk,com,ttle;
total = json.feed.entry.length;
for(i=0; i < total; i++){
entry=json.feed.entry[i];
for (x=0; x < entry.link.length; x++){
arr = entry.link[x];
lnk = (arr.rel=="alternate" ? arr.href : lnk);
if(arr.rel=="replies"){
com = (arr.type=="text/html" ? parseInt(arr.title,10) : com);
}
}
ttle = entry.title.$t;
txt = ('summary' in entry ? entry.summary.$t : entry.content.$t);
sortAllPosts.push(new hotPost(lnk,ttle,com,txt));
}
sortAllPosts=sortAllPosts.OrderMaxMin();
};
Array.prototype.OrderMaxMin = function(){
var max=0;
var tmp=[];
var x,i,post;
for(i=0; i<this.length; i++){
post=this[i];
max = ( post.comm > max ? post.comm : max);
}
for(x = max; x>=0; x--){
for(i=0; i<this.length; i++){
post=this[i];
if(post.comm == x){
tmp.push(post);
}
}
}
return(tmp);
};
Array.prototype.DisplayHotPosts = function(max,txt) { for(var i=0; i<max;i++){ p=this[i]; getHP(p.tit.link(p.url)+" ("+p.comm+" nhận xét)<br/>"); }};
//]]>
</script>
Lưu Template.
Bước 2. Vào Page Elements. Trên sidebar thêm một tiện ích HTML/Javascript và đặt đoạn code sau đây vào phần nội dung tiện ích (đặt tên tiện ích là Bài viết Hot hay tên gì đó tùy ý bạn).
<div id='HotPosts'>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default?alt=json-in-script&callback=sortAllPostsRecopilation&max-results=999' type='text/javascript'></script>
<script type='text/javascript'>sortAllPosts.DisplayHotPosts(7,00);</script>
</div>
<script src='http://huynh-nhat-ha.blogspot.com/feeds/posts/default?alt=json-in-script&callback=sortAllPostsRecopilation&max-results=999' type='text/javascript'></script>
<script type='text/javascript'>sortAllPosts.DisplayHotPosts(7,00);</script>
</div>
Thay huynh-nhat-ha bằng tên blogspot của bạn, thay số 7 để chỉ số bài viết được hiển thị trên tiện ích.
Lưu ý nếu bạn rành về CSS thì có thể định dạng CSS cho tiện ích này theo kiểu như sau.
#HotPosts {
….
}
#HotPosts a {
…
}
(Huynh Nhat Ha's Blog)
….
}
#HotPosts a {
…
}
(Huynh Nhat Ha's Blog)
Bài viết liên quan:
-
Chỉ hiện tiêu đề bài viết trong Blogger
-
Tiện ích Bài viết mới hơn và cũ hơn cùng chủ đề
-
Tiện ích Bài viết liên quan trên Blogger
-
Tiện ích Nhận xét mới nhất có icon
-
Tiện ích Nhận xét mới nhất theo kiểu cơ bản
-
Tiện ích Nhận xét mới nhất có ảnh đại diện
-
Tùy biến với tiện ích Bài viết liên quan của Linkwithin
-
Tiện ích Nhận xét mới nhất kiểu Author – Comment – Post Title
-
Cách đơn giản tạo “Bài đăng và Nhận xét mới nhất”
-
Tiện ích Bài xem nhiều nhất
0 nhận xét:
Đăng nhận xét