Thủ thuật hiển thị bài viết ở dạng tiêu đề

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



Đây là ảnh ở blog test mà mình đã thực hiện :

Chú ý : đây là thủ thuật tương đối "rối rắm", nếu bạn nào chưa rành thì hãy save template lại trước khi thực hiện, hoặc có thể test trước với blog mới nào đó. Nếu ai đã rành (tức là có thể tự gỡ bỏ nếu ko thích) thì có thể thử ngay trên blog của mình.

☼ Các bước để thực hiện thủ thuật:
A. Thiết lập lại ngày giờ hiển thị của bài đăng
B. Ẩn toàn bộ phần bài viết ở các trang Home, Label, Archive.
C. Thực hiện thủ thuật hiển thị bài viết dạng list.

I. Bước A : 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ấy thời gian , và điều chỉnh lại như hình minh họa bên dưới :


II. Bước A : Ẩ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ếtvà 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 :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Nhấp chọn mở rộng mẫu tiện ích
4. Chèn đoạn code bên dưới vào trước thẻ đóng</head>

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

5. 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 code như sau:
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>
- bước 4 là ẩn phần header & footer của bài viết, bước 5 là ẩn nội dung bài viết.
6. Save template.

III. Bước C : 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 :
a. vào bố cục
b. vào chỉnh sửa code HTML
c. chọn mở rộng mẫu tiện ích
d. 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 code như sau:
<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:
a. Tìm đến đoạn code bên dưới:

<div class='post-header-line-1'/>
<div class='post-body entry-content'>

b.Thêm code như sau:

<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'>
- Thay đổi các code màu đỏ ở trên để có độ rộng thích hợp. Lưu ý, các code màu đỏ ở bước 1 và 2 phải bằng nhau để việc hiển thị được hợp lý.
- Save template để hoàn tất bước C này.

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

Bài viết gốc
In bài này
Previous
Next Post »

Bạn đọc hãy giúp chúng tôi xây dựng cộng đồng bằng cách để lại bình luận, chúng tôi luôn đón nhận mọi ý kiến của các bạn:
» Bình luận nghiêm túc và không chứa các liên kết quảng cáo.
» Vui lòng không Spam nhận xét với mọi hình thức.
» Rất mong bạn đề tên cho nhận xét của chính mình - Bằng cách chọn vào Tên/URL và điền tên bạn vào (Phần URL có thể bỏ trống ).

- Bạn có thể chèn Link nhạc (NCT), video(Youtube),Hình ảnh vào comment bằng cú pháp:
+ [youtube] Link video Youtube [/youtube].
+ [img] Link ảnh( định dạng PNG, JPG,GIF) [/img]
+Chèn link liên kết: <a href="LINK" rel="nofollow">Name</a>
-Bạn copy mã bên cạnh biểu tượng chèn vào nhận xét để bày tỏ cảm xúc!! ConversionConversion EmoticonEmoticon

       Mạch Khóa Số Điện Tử Mạch Đếm Sản Phẩm Mạch Đèn giao thông Ngã Tư Mạch Trái Tim Final Mạch Trái Tim Final Mạch Trái Tim I Love U

THƯ MỤC KHO TÀI LIỆU MIỄN PHÍ ECHIPKOOL

Code 8051 - ASM Code 8051 - C Code AVR - C Code led sao băng Code PIC - C Điện tử cơ bản điện tử viễn thông Đo Nhiệt Độ DS18B20 + LCD Đo Nhiệt Độ LM35 + LCD Đo Nhiệt Độ LM35 + Led 7 thanh Đo tốc độ động cơ Động cơ robo Ebook Đại Học ebook điện tử Ebook đồ án Học Orcad Học Protues Hồng ngoại Lập Trình 8051 Lập Trình AVR lập trình c++ Lập Trình Led Quảng Cáo lập trình PIC Lập trình Robot Lập trình VHDL Lcd16x2 Led Clock Led Quay Led RGB Mạch 7seg Mạch Amply.Mạch Loa Mạch Cảm Biến Mạch cube Mạch Đếm Sản Phẩm Mạch điện cơ bản Mạch điện hay Mạch Điện Ứng Dụng Mạch đọc file nhạc MP3 dùng Atmega 8 Mạch Động Cơ Mạch đồng hồ Mạch đồng hồ LCD Mạch đồng hồ Matrix Mạch giao thông Mạch in Mạch khóa số điện tử Mạch Led đơn Mạch Led Quảng Cáo Mạch Led Vumeter Mạch Ma trận Phím Mạch Matrix Mạch nạp Mạch nguồn Mạch Nút Bấm Mạch RS232 Mạch RS485 Mạch thu phát Mạch tổ hợp MSI Mạch trái tim Mạch truyền điện không dây Mạch Vi điều khiển Module Bluetooth Module Sim Module Sim548 Motor Nhiệt độ - Độ ẩm oscilloscope Phần mềm điện tử Phần Mềm Diệt Viruts Phần Mềm Hay Phần Mềm Led Quảng Cáo Phần mềm vi tính robocon Rule robocon Sạc Acquy Sản Phẩm Thương Mại Sáng tạo Smart Home Tài liệu Điện Tử Tranzitor Tụ điện TUT - 8051 - ASM TUT - 8051 - KeilC UART Ứng Dụng Led Quảng Cáo Ứng dụng USB USB TO COM Vi điều khiển - Ứng dụng Vi mạch số VOM Wifi ESP8266