• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tiện ích Bài viết Hot cho blogspot

12
02/03/2011

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>

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>

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 {

}

{12 bình luậnAdd yours ?}

09:55:00, 2 thg 3, 2011

Bài hay ! Thêm avatar nữa đi Hà :55)

Reply
10:30:00, 2 thg 3, 2011

Đã thử gán lệnh cho avatar nhưng test vẫn chưa thành công. Do có lệnh lọc bài nên rất khó, nhưng từ đó mà mình lại phát triển thêm 1 tiện ích Bài viết mới nhất có ảnh đại diện thêm phần trích dẫn khi rê trỏ vào link tiêu đề bài viết. Sắp ra lò rồi. :49)

Reply
21:33:00, 2 thg 3, 2011

Mình đang tập làm một cái template riêng cho mình hà có thể giúp mình làm cái menu giống http://seaebooks.com/ được ko

Reply
22:07:00, 2 thg 3, 2011

Ồ chú em lại muốn tự design Template cơ à. Có lý tưởng đấy. Cố lên nhé. Cái Menu ở trang đó tốn tài nguyên lắm đó. Nếu cậu xem xong cái sớ này, e rằng cậu sẽ từ bỏ ý định xài nó ngay.

Đây là code HTML cho Menu nằm trên.

<div id="nav">
<div class="wrap">
<ul class="nav superfish">
<li class="home current_page_item">
<a href="#" title="Home">Home</a>
</li>
<li class="page_item page-item-2">
<a href="#" title="About">About</a>
</li>
<li class="page_item page-item-3">
<a href="#" title="Sitemap">Sitemap</a>
</li>
<li class="page_item page-item-4">
<a href="#" title="Member">Member</a>
</li>
<li class="page_item page-item-5">
<a href="#" title="Contact">Contact</a>
</li>
<li class="right search">
<form action='/search' class='search' id='searchform' method='get'>
<input name='q' onblur='if (this.value == "") {this.value = "Từ Khóa Tìm Kiếm";}' onfocus='if (this.value == "Từ Khóa Tìm Kiếm") {this.value ="";}' size='30' type='text' value='Từ Khóa Tìm Kiếm'/>
</form>
</li>
</ul>
</div>
</div>

Đây là code HTML cho Menu nằm dưới.

<div id="subnav">
<div class="wrap">
<ul class="nav superfish">
<li class="cat-item cat-item-21">
<a href="#" title=" ">LowerMenu 1</a>
</li>
<li class="cat-item cat-item-22">
<a href="#" title=" ">LowerMenu 2</a>
</li>
<li class="cat-item cat-item-23">
<a href=" " title=" ">LowerMenu 3</a>
</li>
<li class="cat-item cat-item-24">
<a href=" " title=" "> LowerMenu 4</a>
</li>
<li class="cat-item cat-item-25">
<a href="#" title=" "> LowerMenu 5</a>
</li>
<li class="cat-item cat-item-26">
<a href=" " title=" "> LowerMenu 6</a>
</li>
</ul>
</div>
</div>
Phần CSS thì xem ở Comment kế tiếp nhé MQ. :57)

Reply
22:09:00, 2 thg 3, 2011

Và đây là toàn bộ code CSS cho 2 thèn Menu này nè.

/***** Nav Menu ********************/#nav{clear:both;background:#FFF;width:960px;height:50px;color:#0D96E6;font-weight:bold;margin:0 auto 0;padding:0;box-shadow:0 0 3px #BBB;-moz-box-shadow:0 0 3px #BBB;-webkit-box-shadow:0 0 3px #BBB;-moz-border-radius-topleft:20px;-moz-border-radius-topright:20px;-khtml-border-radius:20px;-webkit-border-top-left-radius:20px;-webkit-border-top-right-radius:20px;-webkit-border-bottom-left-radius:0;-webkit-border-bottom-right-radius:0;overflow:hidden}
#nav .wrap{margin:0;padding:0}
#nav ul{width:950px;float:left;list-style:none;margin:0;padding:0 0 0 10px}
#nav li{float:left;list-style:none;margin:0;padding:0}
#nav li a{color:#089BFF;display:block;font-size:12px;font-weight:bold;margin:0 10px 0 0;padding:15px 10px;text-decoration:none;position:relative}
#nav li a.sf-with-ul{padding-right:20px}
#nav li a:hover,#nav li a:active,#nav .current_page_item a{color:#000}
#nav li li a,#nav li li a:link,#nav li li a:visited{background:#FFF;color:#7BA520;width:138px;font-size:11px;margin:0;padding:6px 10px;border-left:1px solid #666;border-right:1px solid #666;border-bottom:1px solid #666;position:relative}
#nav li li a:hover,#nav li li a:active{color:#000}
#nav li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:160px;margin:0;padding:0}
#nav li ul a{width:140px}
#nav li ul a:hover,#nav li ul a:active{}
#nav li ul ul{margin:-33px 0 0 159px}
#nav li:hover ul ul,#nav li:hover ul ul ul{left:-999em}
#nav li:hover ul,#nav li li:hover ul,#nav li li li:hover ul{left:auto}
#nav li:hover{position:static}
#nav li.right{float:right;margin:0 20px 0 0;padding:15px 0 0 0}
#nav li.right a{display:inline;margin:0;padding:0;border:none;background:none;color:#FFF;font-weight:bold;text-decoration:none}
#nav li.right a:hover{color:#FC0;text-decoration:none}
#nav li.search{padding:3px 0 0 10px}
/***** SubNav Menu ********************/
#subnav{clear:both;width:960px;height:35px;background:url(http://seaebooks.com/wp-content/themes/child/images/subnav.png);color:#FFF;margin:0 auto 0;padding:0;box-shadow:0 0 3px #BBB;-moz-box-shadow:0 0 3px #BBB;-webkit-box-shadow:0 0 3px #BBB}
#subnav .wrap{}
#subnav ul{width:100%;float:left;list-style:none;margin:0;padding:0 0 0 10px}
#subnav li{float:left;list-style:none;margin:0;padding:0}
#subnav li a{color:#FFF;display:block;font-size:12px;font-weight:bold;margin:0 10px 0 0;padding:7px 10px 8px;text-decoration:none;position:relative}
#subnav li a:hover,#subnav li a:active,#subnav .current_page_item a,#subnav .current-cat a{color:#000}
#subnav li a.sf-with-ul{padding-right:20px}
#subnav li li a,#subnav li li a:link,#subnav li li a:visited{background:#333;color:#FFF;width:138px;font-size:11px;margin:0;padding:6px 10px;border-left:1px solid #999;border-right:1px solid #999;border-bottom:1px solid #999;position:relative}
#subnav li li a:hover,#subnav li li a:active{color:#FC0}
#subnav li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:160px;margin:0;padding:0}
#subnav li ul a{width:140px}
#subnav li ul a:hover,#subnav li ul a:active{}
#subnav li ul ul{margin:-33px 0 0 159px}
#subnav li:hover ul ul,#subnav li:hover ul ul ul{left:-999em}
#subnav li:hover ul,#subnav li li:hover ul,#subnav li li li:hover ul{left:auto}
#subnav li:hover{position:static}

Ôi nhìn cái sớ Menu này rợn quá đi mất :71) :47)

Reply
11:25:00, 3 thg 3, 2011

:70) nhìn Code CSS thấy ớn quá

Reply
20:46:00, 28 thg 6, 2011

Load quá lâu !

Reply
18:09:00, 22 thg 8, 2011

Chào Hà, Code này có áp dụng được cho 1 nhãn không?

Reply
19:34:00, 22 thg 8, 2011

Tất nhiên là áp dụng được cho nhãn chứ, thay http://huynh-nhat-ha.blogspot.com/feeds/posts/default bằng http://huynh-nhat-ha.blogspot.com/feeds/posts/default/-/Tên nhãn

Reply
09:54:00, 12 thg 1, 2012

nhưng mà nhìn bản demo đó không đc đẹp cho lắm anh nhỉ.

Reply
12:14:00, 14 thg 3, 2012

Anh ơi cho em hỏi làm sao để bỏ (0 nhận xét) đi, và làm sao để nó có cái buidlet ở đầu mỗi bài viết vậy?

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn