Thủ thuật Blogspot. Tâm sự bằng Thơ: Tiện ích bài đăng nhiều bình luận (comment) nhất cho Blogspot

Đây là một trong nhưng tiện ích mà được các Blogger ưa chuộng nhất @! Đến với tiện bài đăng nhiều comment nhất _ Bạn sẽ biết được bài viết nào trong Blog/Website được độc giả quan tâm nhiều nhất => Từ đó sẽ giúp bạn có một hướng đi mới cho Blogs của bạn chẳng hạn.

Đọc thêm:

● Thêm tiện ích bài viết gần đây (Recent Posts) cho blogspot với 3 Phong cách rất bắt mắt

● Thêm nút Share trực tiếp vào bài viết cho Blogspot Pro Version 1

Tuy nhiên để phù hợp với các mẫu Blogs khác nhau, nên windows2it đưa ra 5 phong cách cho các bạn lựa chọn. Đây chỉ là một thiết kế đơn giản và sẽ hứa hẹn ở một Pro Version bắt mắt hơn.

☼ Bắt đầu thủ thuật _ Chỉ cần chèn đoạn Code sau đây một Widget HTML/Javascript

Đầu tiên bạn vào Blog => Bố cục => Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu lại.

Code theo phong cách 1:

Tiện tích bài đăng nhiều comment nhất cho Blogspot

<style>
.comment-count {
border: 8px inset #0572F8;
padding: 3px 10px;
background: #000000;
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 80%;
float: right;
}
.odhik-montobbo ul {
padding: 0px !important;
list-style:none;
font-family: 'Oswald', sans-serif;
}
.odhik-montobbo ul li {
list-style: none;
padding: 10px;
color: #000000;
background:none;
height: 64px;
}
.odhik-montobbo ul li a {
color: #000000;
list-style: none;
text-decoration: none;
font-size: 95%;
height: 64px;
}
.odhik-montobbo:nth-child(3n+0) {
background: #E21323;
width: 95%;
height: 64px;
border: 8px inset #0572F8;
}
.odhik-montobbo:nth-child(4n+0) {
background: #E5FF99;
width: 95%;
height: 64px;
border: 8px inset #0572F8;
}
.odhik-montobbo:nth-child(5n+0) {
background: #00E5FF;
width: 95%;
height: 64px;
border: 8px inset #0572F8;
}
.odhik-montobbo:nth-child(6n+0) {
background: #09BCF7;
width: 95%;
height: 64px;
border: 8px inset #0572F8;
}
.odhik-montobbo:nth-child(7n+0) {
background: #09F746;
width: 95%;
height: 64px;
border: 8px inset #0572F8;
}
</style>
<script type="text/javascript">
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="odhik-montobbo"><ul><li style="margin-bottom: 25px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';
 document.write(postList);
 }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://windows2it.com
&amp;NumberofPosts=7
&amp;_id=2cb5eb603ed55a6264ee1484e5fdd45c
&amp;_callback=mostcommented
&amp;_render=json" type="text/javascript"></script>

Code theo phong cách 2:

Tiện tích bài đăng nhiều bình luận (comment) nhất cho Blogspot

<style>
.comment-count {
border-radius: 30px;
padding: 3px 10px;
background: #000000;
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 80%;
float: right;
}
.odhik-montobbo ul {
padding: 0px !important;
list-style:none;
font-family: 'Oswald', sans-serif;
}
.odhik-montobbo ul li {
list-style: none;
padding: 10px;
color: #000000;
margin-top: -10px;
background:none;
}
.odhik-montobbo ul li a {
color: #000000;
list-style: none;
text-decoration: none;
font-size: 90%;
}
.odhik-montobbo:nth-child(3n+0) {
background: #E21323;
width: 100%;
margin-top:10px;
border-radius: 30px;
}
.odhik-montobbo:nth-child(4n+0) {
background: #E5FF99;
width: 100%;
border-radius: 30px;
}
.odhik-montobbo:nth-child(5n+0) {
background: #00E5FF;
width: 100%;
border-radius: 30px;
}
.odhik-montobbo:nth-child(6n+0) {
background: #09BCF7;
width: 100%;
padding-top:-15px;
border-radius: 30px;
}
.odhik-montobbo:nth-child(7n+0) {
background: #09F746;
width: 100%;
border-radius: 30px;
}
</style>
<script type="text/javascript">
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="odhik-montobbo"><ul><li style="margin-bottom: 10px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';
 document.write(postList);
 }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://windows2it.com
&amp;NumberofPosts=7
&amp;_id=2cb5eb603ed55a6264ee1484e5fdd45c
&amp;_callback=mostcommented
&amp;_render=json" type="text/javascript"></script>

Code theo phong cách 3:

Tiện tích bài đăng nhiều bình luận nhất cho Blogspot

<style>
.comment-count {
padding: 3px 10px;
background: #000000;
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 80%;
float: right;
}
.odhik-montobbo ul {
padding: 0px !important;
list-style:none;
font-family: 'Oswald', sans-serif;
}
.odhik-montobbo ul li {
list-style: none;
padding: 10px;
color: #000000;
margin-top: -10px;
background:none;
}
.odhik-montobbo ul li a {
color: #000000;
list-style: none;
text-decoration: none;
font-size: 90%;
}
.odhik-montobbo:nth-child(3n+0) {
background: #E21323;
width: 100%;
margin-top:10px;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
}
.odhik-montobbo:nth-child(4n+0) {
background: #E5FF99;
width: 100%;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
}
.odhik-montobbo:nth-child(5n+0) {
background: #00E5FF;
width: 100%;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
}
.odhik-montobbo:nth-child(6n+0) {
background: #09BCF7;
width: 100%;
padding-top:-15px;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
}
.odhik-montobbo:nth-child(7n+0) {
background: #09F746;
width: 100%;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
}
</style>
<script type="text/javascript">
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="odhik-montobbo"><ul><li style="margin-bottom: 10px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';
 document.write(postList);
 }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://windows2it.com
&amp;NumberofPosts=7
&amp;_id=2cb5eb603ed55a6264ee1484e5fdd45c
&amp;_callback=mostcommented
&amp;_render=json" type="text/javascript"></script>

Code theo phong cách 4:

<style>
.comment-count {
padding: 3px 10px;
background: #000000;
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 80%;
float: right;
}
.odhik-montobbo ul {
padding: 0px !important;
list-style:none;
font-family: 'Oswald', sans-serif;
}
.odhik-montobbo ul li {
list-style: none;
padding: 10px;
color: #000000;
margin-top: -10px;
background:none;
}
.odhik-montobbo ul li a {
color: #000000;
list-style: none;
text-decoration: none;
font-size: 90%;
}
.odhik-montobbo:nth-child(3n+0) {
background: #E21323;
width: 100%;
margin-top:10px;
}
.odhik-montobbo:nth-child(4n+0) {
background: #E5FF99;
width: 100%;
}
.odhik-montobbo:nth-child(5n+0) {
background: #00E5FF;
width: 100%;
}
.odhik-montobbo:nth-child(6n+0) {
background: #09BCF7;
width: 100%;
padding-top:-15px;
}
.odhik-montobbo:nth-child(7n+0) {
background: #09F746;
width: 100%;
}
</style>
<script type="text/javascript">
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="odhik-montobbo"><ul><li style="margin-bottom: 10px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';
 document.write(postList);
 }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://windows2it.com&amp;NumberofPosts=7&amp;_id=2cb5eb603ed55a6264ee1484e5fdd45c
&amp;_callback=mostcommented
&amp;_render=json" type="text/javascript"></script>

Code theo phong cách 5:

Tiện tích bài viết nhiều comment nhất cho Blogspot

<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=7;
var homePage="windows2it.com";
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>

☼ Tùy chỉnh

· Thay windows2it.com thành địa chỉ Blog/Website của bạn.

· Thay số 7 thành số lượng bài đăng mà bạn muốn hiển thị.

☼ Kết luận

· Vì tiện ích này vô cùng đơn giản nên mình không để Demo ngoài, chỉ để Demo bằng hình ảnh mình đã chụp lại.

· Sử dụng các đoạn CSS và đoạn Javascript mở (chưa mã hóa - endcode) nên việc tùy biến rất dễ dàng. Chú ý: Fonts chữ trong tiện ích này phụ thuộc vào Fonts chữ trong template của các bạn <tiện ích này có bắt mắt hay không chủ yếu là ở Fonts chữ ##>

· Đây là một Version đơn giản nhưng khá bắt mắt và sẽ tuyệt vời hơn ở Pro Version các bạn theo dõi nhé !

Backlink: Xây dựng chiến lược kinh doanh

Còn bạn muốn Support gì thì cứ để lại comment @!