Cách hiển thị các bài đăng được nhận xét nhiều nhất trong Blogger

Một trong những tiện ích tốt nhất cho blog Blogger của bạn là tiện ích bài đăng phổ biến cho thanh bên của bạn. Điều này cho phép khách truy cập xem các bài đăng thịnh hành của bạn ngay bây giờ và khuyến khích họ nhấp vào để đọc chúng. Tuy nhiên, tiện ích cơ bản này hơi quá cơ bản đối với những người truy cập trang web ngày nay. Họ không chỉ muốn xem các bài đăng thịnh hành của bạn mà còn muốn tham gia các cuộc thảo luận đang diễn ra trên blog của bạn. Để làm điều đó, bạn sẽ cần một tiện ích bài đăng được nhận xét nhiều nhất cho Blogger.

Có một widget tùy chỉnh trên trang web của bạn dễ dàng hơn nhiều so với những gì bạn nghĩ. Tuy nhiên, để có một widget hiệu quả, bạn sẽ cần một vài thứ cụ thể để giúp bạn.
tiện ích con bài đăng được bình luận nhiều nhất
   

Đây là những gì bạn sẽ nhận được

Có một số khía cạnh nhất định trong thiết kế widget bài đăng được bình luận nhiều nhất mà bạn nên mong đợi. Đó là lý do tại sao bạn sẽ tìm thấy các thành phần cụ thể này với tiện ích con tùy chỉnh này:
  • Thứ tự theo mức độ phổ biến. Các bài đăng có nhiều bình luận nhất có nhiều khả năng khách truy cập muốn đọc bài đăng và tham gia vào cuộc trò chuyện nhất. Bằng cách sắp xếp các bài đăng của bạn dựa trên mức độ phổ biến của chúng, bạn sẽ cho mỗi khách truy cập cơ hội để xem những gì thực sự là quảng cáo cường điệu! Điều này cho phép bạn có một đồ họa biểu đồ giúp khách truy cập dễ dàng nhận ra, nhưng cũng cho phép bạn giữ cho nó thẳng hàng và căn chỉnh nếu bạn đang tìm kiếm một cái nhìn rõ ràng hơn.
  • Kết hợp đồ họa. Các bài đăng trên blog có ít nhất một hình ảnh được kết hợp với chúng sẽ nhận được nhiều lưu lượng truy cập hơn 100% so với các bài đăng hoàn toàn không có hình ảnh. Đối với mỗi hình ảnh mà bạn đưa vào một bài đăng trên blog, bạn càng có nhiều khả năng nhận được một nhấp chuột! Điều này cũng đúng với tiện ích các bài đăng được nhận xét nhiều nhất của bạn, vì vậy hãy đảm bảo kết hợp đồ họa nổi bật với thiết kế của bạn.
  • Các mô tả kết hợp với nhau. Internet ngày nay xoay quanh giá trị mà bạn có thể cung cấp cho từng người dùng cá nhân. Mọi người không chỉ nhấp vào mọi thứ vì chúng trông hấp dẫn về mặt thị giác. Họ nhấp vào chúng vì chúng hứa hẹn một mức giá trị mà một trang web khác như trang web của bạn không thể cung cấp. Bằng cách có các mô tả kết hợp với nhau, bạn sẽ có thể nâng cao giá trị cảm nhận mà trang web của bạn có thể cung cấp. Điều này dẫn đến nhiều nhấp chuột hơn!

Thêm tiện ích bài đăng được nhận xét nhiều nhất vào Blogger

Bước 1. Đăng nhập vào tài khoản Blogger của bạn và vào Mẫu, nhấn nút "Chỉnh sửa HTML". Bước 2. Nhấp vào bất kỳ đâu bên trong vùng mã và nhấn tổ hợp phím CTRL + F để mở hộp tìm kiếm của Blogger. Nhập thẻ sau vào bên trong thẻ và nhấn Enter để tìm thẻ:
</Group>
Bước 3. Ngay bên dưới </Group> , thêm mã này:
<Group description = "Most Comment" selector = ". Most-comment">
<Variable name = "most.commented.background1" description = "background color1" type = "color" default = "# fa4242" value = "# ee377a "/>
<Tên biến =" most.commented.background2 "description =" background color2 "type =" color "default =" # ee6107 "value =" # fcad37 "/>
<Tên biến =" most.commented.background3 " description = "background color3" type = "color" default = "# f0f" value = "# f8e000" />
<Tên biến = "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>
 
thêm mã vào html của blogger
Lưu ý: nếu bạn không thể tìm thấy thẻ </Group>, hãy thử tìm thẻ sau và thêm các biến ngay bên dưới thẻ:
<b: skin> <! [CDATA [

Bước 4. Bây giờ tìm kiếm thẻ sau (CTRL + F):
Bước 4. Bây giờ tìm kiếm thẻ sau (CTRL + F):
]]> </ b: skin>
Bước 5. Và ngay phía trên nó, thêm mã CSS này:
Bước 5. Và ngay phía trên nó, thêm mã CSS này:
.comment-count {
    padding: 3px 10px;
    nền: #fff;
    màu: # 000;
    font-size: 10px;
    float: phải;
}

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

.most-comment ul li {
    list-style-type: none;
    đệm: 10px;
    màu: # 555;
    margin-top: -10px;
}

.most-comment ul li a {
    color: # 444;
    font-weight: bold;
    văn bản-trang trí: không có;
    font-size: 11px;
}

.most-comment ul li img {
    float: left;
    lề: 0px 5px 0px 0px;
    chiều rộng: 60px;
    chiều cao: 60px;
}

.most-comment: nth-child (3n + 0) {
    background: $ (most.commented.background1);
    chiều rộng: 100%;
}

.most-comment: nth-child (4n + 0) {
    background: $ (most.commented.background2);
    chiều rộng: 95%;
}

.most-comment: nth-child (5n + 0) {
    background: $ (most.commented.background3);
    chiều rộng: 90%;
}

.most-comment: nth-child (6n + 0) {
    background: $ (most.commented.background4);
    chiều rộng: 85%;
}

.most-comment: nth-child (7n + 0) {
    background: $ (most.commented.background5);
    chiều rộng: 80%;
}
Bước 6. Lưu mẫu. Bây giờ, hãy thêm tiện ích Bài đăng được nhận xét nhiều nhất vào Bố cục của blog Blogger của chúng tôi. Đi tới phần "Bố cục" trên trang tổng quan Blogger của bạn và nhấp vào liên kết "Thêm tiện ích" ở phía bên phải. Từ cửa sổ bật lên, cuộn xuống danh sách và chọn tiện ích "HTML / JavaScript":
tiện ích blogger html javascript
Sao chép và dán tập lệnh này vào bên trong hộp nội dung:
<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-comment"> <ul> <li> <div class = "comment-count">' + postComments + "</div>" + postthumbnail + "<a href =" + postURL + '">' + postTitle +" </a> "+ '<p>' + stripTags (postDescription, 10 ) + '... </p>' + '</li> </ul> </ul> div> ';
 document.write (postList);
     }
 }
 </script>
<script src = "http://pipes.yahoo.com/pipes/pipe.run?
AddUrlHere = https://giangpc.blogspot.com/
& NumberofPosts = 5
& _id = 2cb5eb603ed55a6264ee1484e5fdd45c
& _callback = mostcommented
& _render = json "
type = "text / javascript"> </script> <span style = "font-size: 80%; float: left;"> <a href = "http://helplogger.blogspot.com/2014/08/most -commented-posts-blogger-widget.html "> Thêm tiện ích này </a> </span>
Tại đây, hãy thay đổi https://giangpc.blogspot.com/ bằng URL blog của bạn. Nếu bạn muốn thêm nhiều ký tự hơn vào mô tả, hãy sửa đổi giá trị " 10 " màu đỏ từ "postDescription, 10 ".

Nếu bạn muốn có giao diện đơn giản hơn (không có hình thu nhỏ và đoạn trích đăng), hãy thêm tập lệnh này để thay thế:
Tại đây, hãy thay đổi https://giangpc.blogspot.com/ bằng URL blog của bạn. Nếu bạn muốn thêm nhiều ký tự hơn vào mô tả, hãy sửa đổi giá trị " 10 " màu đỏ từ "postDescription, 10 ". Nếu bạn muốn có giao diện đơn giản hơn (không có hình thu nhỏ và đoạn trích đăng), hãy thêm tập lệnh này để thay thế:
<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-comment"> <ul> <li style = "margin-bottom: 10px"> <div class = "comment-count">' + postComments + "</div>" + "<a href =" + postURL + '




<script src = "http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere = https://giangpc.blogspot.com/
& NumberofPosts = 5
& _id = 2cb5eb603ed55a6264ee1484e5fdd45c
& _callback = mostcommented
& _render = json"
type = "text =" text javascript "> </script>
<span style =" font-size: 80%; float: left; "> <a href =" http://helplogger.blogspot.com/2014/08/most-commented-posts- blogger-widget.html "> Thêm tiện ích này </a> </span>
.... và thay thế https://giangpc.blogspot.com/ bằng địa chỉ của bạn. Để thêm văn bản "nhận xét" sau số nhận xét, hãy thay thế dòng bằng màu đỏ:
<div class = "comment-count"> '+ postComments + "</div>"
với:
<div class = "comment-count"> '+ postComments + "comment" + "</div>"
Khi bạn đã hoàn tất việc thêm cài đặt của riêng mình, hãy nhấn nút "Lưu" để bật tiện ích trong thanh bên của blog của bạn. Đó là nó!

cấu hình tiện ích javascript html

Để thay đổi màu nền của các bài đăng được nhận xét nhiều nhất, hãy chuyển đến "Mẫu"> nhấn nút "Tùy chỉnh" và điều hướng đến tab "Nâng cao"> "Nhận xét nhiều nhất". Tại đây, bạn có thể chọn 5 màu khác nhau bằng cách nhấp vào các hộp màu:

nhà thiết kế mẫu blogger

Khi bạn đã chọn được bảng màu yêu thích của mình, hãy nhấp vào nút "Áp dụng cho blog" để lưu các thay đổi ... và bạn đã hoàn tất.