2 skin đẹp cho phân trang comments của blogger

Mặc định trong commentscủa Blogger có dạng liên kết điều hướng (Cũ, cũ hơn, mới hơn và mới) ở trên và bên dưới của phần bình luận. Khi Blogger nâng cấp lên Threaded, chức năng này không còn nữa. Nhưng bây giờ ta sẽ khiến cho chúng hoạt động bình thường ngay cả khi nâng cấp lên kiểu comments mới (nghĩa là có cả Threaded comments)

1. Chỉ làm việc khi bài viết của bạn có trên 200 comments.
2. Không làm việc đối với Threaded Comments.

Làm cách nào để thêm phân trang cho phần comments?
Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Chọn mở rộng mẫu Tiện ích
Bước 3: Tìm

<b:includable id='comments' var='post'>

Bước 4: Dán code bên dưới vào sau code vừa tìm được phía trên

<b:if cond='data:post.commentPagingRequired'>
<script type='text/javascript'>
var w2bTotalComments = <data:post.numComments/>;
var w2bPrevBtnText = "Prev";
var w2bNextBtnText = "Next";
</script>
<script type="text/javascript" src="http://trollfile.googlecode.com/files/w2b_commentspagination.js"></script>
</b:if> 

• Chỉnh sửa phần màu đỏ theo ý bạn 

Bước 5: Save lại

Thêm style cho phân trang của comments
Vẫn ở chỉnh sửa HTML bạn thêm đoạn một trong hai đoạn code sau vào trước ]]></b:skin>

Style 1

.w2bCommentsPaging{
font-size:13px;
display: block;
}
.commPageOf{
padding:4px 8px;
margin-right:6px;
}
.commPrev a,.commNext a,.commentNum a {
text-decoration: none;
border: 1px solid #ddd;
background: #efefef;
padding: 4px 8px;
margin: 0 4px;
text-decoration: none;
color: #666;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.commPrev a:hover, .commNext a:hover, .commentNum a:hover, .commentNum.commCurrent a{
border:1px solid #CDCDCD;
background:#ddd;
color: #222;
}
.paging-control-container {
clear: both;
display: block;
float: none;
font-size: 80%;
margin: 10px 0;
overflow: hidden;
padding: 10px 0;
text-align: right;
}

 Style 2

.w2bCommentsPaging{
font-size:12px;
display: block;
}
.commPageOf{
padding:5px 10px;
margin-right:6px;
}
.commPrev a,.commNext a,.commentNum a {
text-decoration:none;
background: #4E4E4E;
padding: 5px 10px;
margin: 0 4px;
text-decoration: none;
color: #FFF;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.commPrev a:hover, .commNext a:hover, .commentNum a:hover, .commentNum.commCurrent a{
background:#8956B8;
color:#fff;
}
.paging-control-container {
clear: both;
display: block;
float: none;
font-size: 80%;
margin: 10px 0;
overflow: hidden;
padding: 10px 0;
text-align: right;
}

Hi vọng bài viết này mang lại hữu ích cho bạn, hãy để lại comments và share nhé!

Xem bài gốc tại way2blogging