Bình Luận Nhiều Nhất Cho Blogsot

Ngồi không chả biết làm gì, đành hướng dẫn các bạn làm cái widget recent comment cho blogspot. Cái này sẽ gổm các bài viết được nhiều người comment nhất. Nó khác với recent comment bình thường là chỉ có comment ko thôi chứ ko có hiện thị bài viết chứa comment đó.

Mục lục:

• Mục Đích
• Thực Hiện
• Nâng Cao
• Lời Kết

Mục Đích

• Giúp người mới vào blog mình biết được bài nào sôi nổi được nhiều người quan tâm
• Thuộc widget nằm ở sidebar nên làm cho blogspot đẹp hơn
• ....

Thực Hiện

1. Các bạn vào Blogspot của bạn >> Bố cục >> Thêm tiện ích >> HTML/Javascript

Các bạn nên thêm tiện ích ở sidebar thì đẹp hơn nhiều

2. Sau đó chép toàn bộ code sau vào trong

HTML<div id="most-comments"></div>
<style scoped='' type='text/css'>
#most-comments li,#most-comments ul,#most-comments ul li{margin:0;list-style:none;color:#444;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:14px}#most-comments ul li{position:relative;overflow:hidden;background:#fff;margin:3.5px 0;padding:7px 10px 7px 50px;white-space:nowrap;text-overflow:ellipsis;box-shadow:inset 0 0 #fc4f3f;border:1px solid #e6e6e6;transition:all .6s}#most-comments ul li:hover{box-shadow:inset 310px 0 #fc4f3f}#most-comments ul li a{color:#444;font-weight:700;text-decoration:none;transition:all .3s}#most-comments ul li a:hover,#most-comments ul li:hover a{color:#fff}.count-most{position:absolute;left:0;top:0;width:40px;height:100%;margin:0;padding:7px 0;background-color:#383838;color:#fff!important;text-align:center;transition:all .3s}#most-comments ul li:hover .count-most{background-color:#fc4f3f}
</style>
<script type='text/javascript'>
//<![CDATA[
var numPosts=10;
var homePage="www.anhnhim.net";
var postTitlear=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;document.write('<div id="most-comments"><ul>');
function mostComment(j){var a=j.feed.entry.length;totalpost=a;
for(var f=0;f<a;f++){
var h=j.feed.entry[f];
var c=h.title.$t;var b;
var g;if(f==j.feed.entry.length){break}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];}};
postTitlear.push(c);
postUrlar.push(g);
postCommentar.push(b)}sortPosts();
for(var f=0;f<numPosts;f++){var e='<li><span class="count-most">'+postCommentar[f]+'</span><a href="'+postUrlar[f]+'" title="'+postTitlear[f]+'" target="_blank">'+postTitlear[f]+'</a>';
document.write(e)}}
function sortPosts(){function c(d,f){var e=postTitlear[d];
postTitlear[d]=postTitlear[f];
postTitlear[f]=e;
var e=postUrlar[d];
postUrlar[d]=postUrlar[f];
postUrlar[f]=e;
var e=postCommentar[d];
postCommentar[d]=postCommentar[f];
postCommentar[f]=e}
for(var b=0;b<postTitlear.length-1;b++){
for(var a=b+1;a<postTitlear.length;a++){
if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}
document.write('<script src="http://'+homePage+'/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>');
document.write('</li>')
document.write('</ul>')
document.write('</div>');
//]]>
</script>

Các bạn nhớ thay link màu đỏ www.anhnhim.net thành link URL blog bạn cũng như thay số 10 thành số bài kèm comment bạn muốn hiện thị

Demo
click to view

Nâng Cao

Thay đổi màu khu rê chuột vào

Các bạn copy hết đoạn code trên vào notepad hay word hay notepad ++,.... rồi tìm và thay thế mã màu sau "#4399cd" thành mã màu của bạn.

Vào đây lấy mã màu

Thay đổi màu chứa số comment (ô màu đen ấy)

Tìm dòng background-color: #383838; (dòng này chỉ có một) rồi thay đổi cái mã màu #383838 thành mã màu của bạn.

Lời Kết

Vậy là mình đã hướng dẫn các bạn tạo tiện ích Bình Luận Nhiều Nhất Cho Blogsot, nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.