Hiển thị bài viết dạng list ở các trang Home, Label, Archive |Blog Trần Phúc Minh

Trang chủ » Thủ thuật Blogger » Bạn đang xem:

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

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

Bài gốc:
http://tpm1512.blogspot.com/2011/05/hien-thi-bai-viet-dang-list-o-cac-trang.html

Từ khóa
Thủ thuật Blogger

Minh cám ơn bạn đã quan tâm và rất vui vì bài viết đã đem lại thông tin hữu ích cho bạn.

All comments [ 9 ]

Anonymous lúc 10:31 20 tháng 5, 2011

:)] Chào bạn! ghe tham blog Bạn =))

Trần Phúc Minh lúc 10:39 20 tháng 5, 2011

:)) Chào bạn

KuKen lúc 08:36 22 tháng 6, 2011

cái này có thể để 1 bài viết mới hiện ra - còn mấy bài cũ theo dạng list hoặc tóm tắt k a :D

DH lúc 12:51 19 tháng 8, 2011

chào chú ạ, chú ơi cháu muốn hỏi là khi tạo được menu rồi, nếu muốn đưa bài viết cũ vào từng mục thì làm thế nào à, vì trước đây chưa làm được menu nên để lộn xộn, giờ có menu rồi muốn sắp xếp cho ngăn nắp, cảm ơn chú nhiều !

Trần Phúc Minh lúc 13:27 19 tháng 8, 2011

Mỗi bai viet deu co nhãn riêng gom tất cả bài viet cùng chuyen mục và mot nhãn thì dc thoi

Chi lúc 10:24 3 tháng 11, 2011

Bài rất hay nhưng sẽ rất khó thực hiện với những người không thuộc chuyên ngành về thiết kế web và cả định nghĩa về code nữa.

Trần Phúc Minh lúc 12:05 3 tháng 11, 2011

Nói vậy thôi chứ cũng không có khó đâu bạn! Cũng dể thôi:3)

NPA lúc 14:31 17 tháng 11, 2011

Trần phúc minh - copy ko ghi nguồn :))

Trần Phúc Minh lúc 17:59 17 tháng 11, 2011

Mình quên nhưng chắc ai cũng biết đây là thủ thuật của fandung.com:4) :1)

Blog Trần Phúc Minh