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 :
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"'>
<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.
Comments[ 0 ]
Đăng nhận xét