Xếp hạng bài viết được bình luận nhiều (Most Commented Posts Widget) cho Blogger

bởiDXOan -
2
Mẫu 1

Đăng nhập Blogger ~> Bố cục ~> Thêm tiện ích HTML/Javascript
Dán đoạn code này vào rồi Lưu lại
<!-- Popular posts with comment count Start -->
<script type="text/javascript">
function getYpipePP(feed) {
 document.write('<ol style="">');
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " \(" + feed.value.items[i].commentcount + "\)";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
 document.write(pList);
 document.write(pComment); //to remove comment count delete this line
 document.write('</a></li>');
 }
 document.write('</ol>');
 }
 </script>
 <script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://dxoan.blogspot.com
 &ShowHowMany=10
 &_id=390e906036f48772b2ed4b5d837af4cd
 &_callback=getYpipePP
 &_render=json" 
type="text/javascript"></script>
<!-- Popular posts with comment count End -->
Thay http://dxoan.blogspot.com bằng địa chỉ blog của bạn
ShowHowMany=10 là số bài viết được hiển thị trên bảng xếp hạng
Mẫu 2

Bước 1: Đăng nhập Blogger ~> Mẫu ~> Chỉnh sửa HTML
Tìm thẻ </Group>, thêm đoạn code ngay dưới thẻ </Group> đầu tiên tìm được (thẻ này nằm bên trong <b:skin></b:skin>)
<Group description="Most Commented" selector=".most-commented">
<Variable name="most.commented.background1" description="background color1" type="color" default="#fa4242" value="#ee377a"/>
<Variable name="most.commented.background2" description="background color2" type="color" default="#ee6107" value="#fcad37"/>
<Variable name="most.commented.background3" description="background color3" type="color" default="#f0f" value="#f8e000"/>
<Variable name="most.commented.background4" description="background color4" type="color" default="#ff0" value="#c7e93d"/>
<Variable name="most.commented.background5" description="background color5" type="color" default="#0ff" value="#5ebded"/>
</Group>

Với những template không có thẻ </Group> thì hãy thêm đoạn code trên vào bên dưới thẻ <b:skin><![CDATA[

Tiếp theo, thêm đoạn code sau vào trước thẻ đóng ]]></b:skin>
.comment-count {
    padding: 3px 10px;
    background: #fff;
    color: #000;
    font-size: 10px;
    float: right;
}

.most-commented ul {
    padding: 0px !important;
    font-family: Century Gothic, sans-serif;
}

.most-commented ul li {
    list-style-type: none;
    padding: 10px;
    color: #555;
    margin-top: -10px;
}

.most-commented ul li a {
    color: #444;
    font-weight: bold;
    text-decoration: none;
    font-size: 11px;
}

.most-commented ul li img {
    float: left;
    margin: 0px 5px 0px 0px;
    width: 60px;
    height: 60px;
}

.most-commented:nth-child(3n+0) {
    background: $(most.commented.background1);
    width: 100%;
}

.most-commented:nth-child(4n+0) {
    background: $(most.commented.background2);
    width: 95%;
}

.most-commented:nth-child(5n+0) {
    background: $(most.commented.background3);
    width: 90%;
}

.most-commented:nth-child(6n+0) {
    background: $(most.commented.background4);
    width: 85%;
}

.most-commented:nth-child(7n+0) {
    background: $(most.commented.background5);
    width: 80%;
}

Lưu Mẫu lại.

Bước 2: Vào Bố cục ~> Thêm tiện ích HTML/Javascript
Dán đoạn code này vào rồi Lưu lại
<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 postthumbnail = "<img src="+feed.value.items[i].postthumbnail+" />";
var postDescription = feed.value.items[i].postdescription;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="most-commented"><ul><li><div class="comment-count">' + postComments + "</div>" + postthumbnail + "<a href="+ postURL + '">' + postTitle + "</a>"  + '<p>' +stripTags(postDescription,10)+'...</p>' + '</li></ul></div>';
 document.write(postList);
     }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
AddUrlHere=http://dxoan.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script>
Thay http://dxoan.blogspot.com bằng địa chỉ blog của bạn
NumberofPosts=5 là số bài viết được hiển thị trên bảng xếp hạng (Nếu bạn muốn thay đổi số bài hiển thị thì phải sửa cả phần <Group> ở Bước 1)
(postDescription,10) là hiển thị số ký tự mô tả của bài viết (10 ký tự)
Mẫu 3

Bước 1: Làm giống Bước 1 của Mẫu 2
Bước 2: Vào Bố cục ~> Thêm tiện ích HTML/Javascript
Dán đoạn code này vào rồi Lưu lại
<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="most-commented"><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://dxoan.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script>
Thay http://dxoan.blogspot.com bằng địa chỉ blog của bạn
NumberofPosts=5 là số bài viết được hiển thị trên bảng xếp hạng (Nếu bạn muốn thay đổi số bài hiển thị thì phải sửa cả phần <Group> ở Bước 1)
Mẫu 4

Đăng nhập Blogger ~> Bố cục ~> Thêm tiện ích HTML/Javascript
Dán đoạn code này vào rồi Lưu lại
<style>
    .commentbubble {
    background: #292D30;
    width: 49px;
    float: left;
    margin: 2px 20px 35px 0px;
    font-weight: bold;
    font-size: 1.3em;
    text-align: right;
    font-family: georgia,Helvetica;
    padding: 0px 0px 5px 0px;
    text-align: right;
    color: #FFF;
    text-shadow: 4px 1px #202022;
    position: relative;
    top: 5px;

    }
    .commentbubble:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    right: 0px;
    top: 100%;
    border-width: 5px 8px;
    border-style: solid;
    border-color: #292D30 #292D30 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    top: 34px;
    right: 6px;
    }
    </style>

    <script type="text/javascript">
    function getYpipePP(feed) {
    document.write('<ul style="list-style:none; ">');
    var i;
    for (i = 0; i < feed.count ; i++)
    {
    var href = "'" + feed.value.items[i].link + "'";
    var pTitle = feed.value.items[i].title;
    var pComment = + feed.value.items[i].commentcount;
    var pList = '<li style="clear:both; padding:10px 0px 30px 0px!important; border-bottom: 1px dashed #dedede; line-height:2em; "> <div class="commentbubble">' +pComment +  "&#160;&#160;</div>" +  "<a href="+ href + '" target="_blank">' + pTitle ;
    document.write(pList);
    //to remove comment count delete this line
    document.write('</a></li>');
    }
    document.write('</ul>');
    }
    </script>
    <script src="http://pipes.yahoo.com/pipes/pipe.run?
     YourBlogUrl=http://dxoan.blogspot.com
    &ShowHowMany=6
    &_id=390e906036f48772b2ed4b5d837af4cd
    &_callback=getYpipePP
    &_render=json"
    type="text/javascript"></script>
Thay http://dxoan.blogspot.com bằng địa chỉ blog của bạn
ShowHowMany=6 là số bài viết được hiển thị trên bảng xếp hạng
Chú ý: Để chỉnh sửa màu sắc các khung bài viết của Mẫu 2 và Mẫu 3 thì các bạn làm như sau:
Đăng nhập Blogger ~> Mẫu ~> Tùy chỉnh ~> Nâng cao ~> Most Commented ~> Chỉnh sửa màu theo ý muốn rồi chọn Áp dụng cho Blog

Tags

DXOan

Đây chính là tôi với sự bùng nổ của những giấc mơ. Tôi thích khám phá và chia sẻ những điều mới mẻ. Hãy đồng hành cùng tôi nhé ! 😁😘😍 - Con đường tôi đi là con đường tôi chọn - 😎😂✌ facebook twitter pinterest youtube external-link

Bạn có thể thích những bài đăng này

2 Nhận xét

Vui lòng đưa ra những nhận xét tích cực, mang tính xây dựng.*

  1. Unknown19:36 27/5/15

    Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  2. đa14:23 20/8/15

    Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
Mới hơn Cũ hơn

AdBlock Detected!

Phát hiện trình duyệt đang sử dụng AdBlock. Vui lòng tắt AdBlock để có thể xem nội dung cũng như ủng hộ tác giả. DXOan xin cảm ơn. Chúc bạn một ngày vui vẻ !