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

    <table style='background:#eee; width:100%'>

    <tr>

    <td style='width:70%; text-align:center; font-weight:bold;'>Tiêu đề</td>

    <td style='width:15%; text-align:center; font-weight:bold;'>Tác Giả</td>

    <td style='width:15%; text-align:center; font-weight:bold;'>Ngày đăng</td>

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

    <table style='border-bottom:1px solid #aaa; width:100%'>

    <tr>

    <td style='width:70%; font-weight:bold;'>

    [<span class='post-labels'>

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

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

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

    </td>

    <td style='width:15%; font-weight:bold; text-align:center;'>

    <span class='post-author vcard'>

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

    <span class='fn'><data:post.author/></span>

    </b:if>

    </span>

    </td>

    <td style='width:15%; font-weight:bold; text-align:center;'>

    <span class='post-timestamp'>

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

    <data:post.timestamp/>

    </b:if>

    </span>

    </td>

    </tr>

    </table>

    </b:if>

    <div class='post-body entry-content'>


- Save template để hoàn tất .

Chúc các bạn thành công.