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...
- 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'>
    <!-- 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.