Hiển thị bài viết dạng list ở các trang Home, Label, Archive

Mình đã từng giới thiệu với các bạn thủ thuật chỉ hiển thị tiêu đề bài viết ở các trang Home, Label, Archive (xem thêm ở đây), hôm nay mình sẽ giới thiệu 1 cách hiển thị cũng tương tự, nhưng có hơi phức tạp hơn 1 chút. Cũng với dạng hiển thị dạng list, nhưng ở thủ thuật này sẽ bổ xung thêm phần ngày đăng, tác giả, nhãn...

Hình ảnh minh họa :

* 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 :

- Bước 2 : Ẩn toàn bộ phần bài viết ở các trang Home, Label, Archive
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ả...

Để hoàn thực bước 2 này, các bạn làm theo các bước bên dưới :
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'>
    
    <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'>
    
    <div class='blog-posts hfeed'>
    <b:include data='top' name='status-message'/>

    <b:if cond='data:blog.pageType != "item"'>

<tr>

</tr>

</table>

</b:if>

    <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"'>

<tr>

[<span class='post-labels'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

</span>] <a expr:href='data:post.url'><data:post.title/></a>

</td>

<b:if cond='data:top.showAuthor'>

</b:if>

</span>

</td>

<b:if cond='data:top.showTimestamp'>

<data:post.timestamp/>