Hiển thị bài viết dạng list ở các trang Home, Label, Archive
* Các bước để thực hiện thủ thuật:
- Bước 1 : Thiết lập lại ngày giờ hiển thị của bài đăng
Để hiển thị được ngày giờ như trong hình demo, các bạn thực hiện các bước sau:
- Vào Cài đặt » Định dạng » tới mục Định dạng dấu thời gian , và điều chỉnh lại như hình minh họa bên dưới :
Phần bài viết bạn sẽ có 3 chỗ phải ẩn, đó là Header bài viết, nội dung bài viết và phần Footer của bài viết.
- Phần Header bài viết : gồm có 2 phần, đó là tiêu đề và phần date-header (ngày đăng bài viết).
- Phần nội dung : chứa nội dung bài viết.
- Phần Footer : gồm ngày đăng, nhãn, tác giả...
Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích
- Chèn đoạn code bên dưới vào trước thẻ đóng </head> để ẩn phần header & footer của bài viết :
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display : none;}
.date-header {display : none;}
.post-title {display : none;}
</style>
</b:if>
- Tiếp tục tìm đoạn code bên dưới :
<data:post.body/>
hoặc có thể là
<p><data:post.body/></p>
và thêm đoạn code được in đậm vào như bên dưới để ẩn nội dung bài viết :
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
- Save template.
- Bước 3 : Thủ thuật chính
1. Trước tiên ta sẽ tạo header cho phần list này (xem hình minh họa)
=> Các bước thực hiện :
- Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích
- Tìm đoạn code bên dưới (hoặc tương tự):
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
- thêm đoạn code được in đậm như bên dưới:
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:if cond='data:blog.pageType != "item"'>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
- Khoan Save template, tiếp tục thực hiện sang bước 2.
2. Tạo & trang trí cho list bài viết:
- Tìm đến đoạn code bên dưới:
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
- Thêm đoạn code được in đậm như bên dưới:
<div class='post-header-line-1'/>
<b:if cond='data:blog.pageType != "item"'>
<div class='post-body entry-content'>
- Save template để hoàn tất .
Chúc các bạn thành công.
Đăng nhận xét