Hiển thị thông tin bài viết phía trên tiêu đề khi xem bài viết
[FD's BlOg] - Một thủ thuật cho phép bạn hiển thị các thông tin của bài viết như : tiêu đề bài viết, số bài comment, Nhãn, ngày đăng.... Và bảng thông tin này chỉ xuất hiện ở bài viết.
Bài viết này mình chỉ chú trọng thủ thuật, chứ không đi sâu vào việc thiết kế giao diện cho bảng thông tin này. Nếu bạn nào muốn làm bảng cho đẹp hơn, pro hơn thì có thể tùy chỉnh thêm trong code CSS của bảng.
Xem hình minh họa kết quả:
☼ Bây giờ ta bắt đầu :
1. Vào bố cục (layout)
2. Vào chỉnh sửa code HTML (edit code HTML),(nên save template lại trước khi làm, vì khi gỡ bỏ nó có hơi chút phức tạp)
3. Chọn mở rộng mẫu tiện ích (expand widget template)
4. Đầu tiên chèn đọan code CSS vào trước dòng ]]></b:skin>
.meta-info {
background: red;
font-family: 'Century Gothic', sans-serif;
padding: 5px;
margin: 10px 0 0;
}
.meta-info .title {background: #AB8C61; color: #fff; padding: 3px;} // CSS của tiêu đề
.meta-info .comments {background: #999; color: #fff; padding: 3px;} // CSS của dòng comment
.meta-info .comments a {color: white; text-decoration: underline;}
.meta-info .labels {background: #AB8C61; color: #fff; padding: 3px;} // CSS của dòng nhãn
.meta-info .labels a {color: white;}
.meta-info .date {background: #999; color: #fff; padding: 3px;} // CSS của ngày đăng bài viết
5. Tiếp tục tìm đọan code bên dưới :
<b:section class='main' id='main' showaddelement='no'>
6. Chèn sau nó đọan code bên dưới:
<b:widget id='Blog99' locked='false' title='Blog Meta' type='Blog'>
<b:includable id='main' var='top'>
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</b:if>
</b:includable>
<b:includable id='post' var='post'>
<div class='meta-info'>
<div class='title'><b>Ban đang đọc bài:</b> "<b><data:post.title/>"</b>.</div>
<div class='comments'>
<b>Số bài nhận xét </b>: <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.numComments/> <data:top.commentLabelPlural/>
</a>
</div>
<div class='labels'>
<b:if cond='data:post.labels'>
<b><data:postLabelsLabel/></b>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</div>
<div class='date'>
<b>Ngày đăng</b>: <data:post.dateHeader/>.
</div>
</div>
</b:includable>
</b:widget>
- Các dòng code màu đỏ bạn có thể thay đổi chúng.
- Thọat hình các một vài bạn sẽ thắc mắc code không có thông tin về Nhãn(label) của bài viết, nhưng không phải vậy, dòng code <data:postLabelsLabel/> là để thay thế cho " Nhãn : ", bạn hòan tòan có thể xóa bỏ dòng này và thay bằng dòng mà bạn muốn hiển thị, ví dụ : "Nhãn bài đăng :" , hay những gì khác tương tự, tùy theo bạn.
- Ngòai ra bạn cũng có thể chèn các icon hình ảnh vào trước mỗi dòng màu đỏ để cho bảng trông bắt mắt hơn, để làm điều này bạn chỉ việc thêm thẻ <img src="link ảnh"/> vào trước mỗi dòng màu đỏ.
7. Save template.
Chúc các bạn thành công.
Comments[ 0 ]
Đăng nhận xét