Hướng dẫn tạo style cho bài viết đầu tiên

Các bạn chơi Blog lâu năm chắc chẳng lạ gì với dạng cấu trúc này nhưng với những bạn mới làm quen với Blog có thể chưa tìm hiểu. Tạo style cho bài viết đầu tiên tức là thiết kế lại css cho bài viết đầu tiên tạo điểm nhấn khác biệt với những bài viết cũ hơn. Các bạn có thể xem hình demo dưới đây để thấy rõ hơn

Người thiết kế rất ít khi đưa dạng này vào cấu trúc template nhưng bạn có thể tự thiết kế lại cho Blog của mình. Trong bài này mình sẽ giúp bạn bạn hiểu phương pháp làm còn cách tạo style như thế nào thì bạn tự tìm hiểu và thiết kế cho phù hợp với Blog của mình.

Chúng ta cần 2 điều kiện quan trọng thứ nhất sử dụng HTML gọi dữ liệu của bài viết đầu tiên và thứ hai tạo style cho bài viết. Về gọi dữ liệu HTML do cấu trúc của mỗi template không giống nhau cho nên rất khó xác định là đặt trong mục nào nhưng bắt buộc đoạn HTML gọi dữ liệu phải đặt trong đoạn <b:includable id='post' var='post'>...</b:includable> có mẫu sau:

Copy

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

// Đoạn HTML gọi dữ liệu ảnh, meta, tóm tắt

</b:if>

Mình lấy ví dụ đoạn HTML gọi dữ liệu bài viết cho các trang index có dạng sau:

Copy

<b:if cond='data:blog.pageType == "index"'>

<div class='post-thumb'>...</div> // Gọi dữ liệu ảnh đầu tiên của bài viết

<div class='post-title'>...</div> // Tiêu đề bài viết

<div class='post-meta'>...</div> // Gọi dữ liệu thời gian đăng bài, tác giả, label...

<div class='post-snippet'>...</div> // Tóm tắt bài viết

</b:if>

Bây giờ bạn sẽ thêm đoạn HTML gọi dữ liệu bài viết đầu tiên vào như sau:

Copy

<b:if cond='data:blog.pageType == "index"'>

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

<div class='post-first-thumb'>...</div>

<div class='post-first-title'>...</div>

<div class='post-first-meta'>...</div>

<div class='post-first-snippet'>...</div>

<b:else/>

<div class='post-thumb'>...</div>

<div class='post-title'>...</div>

<div class='post-meta'>...</div>

<div class='post-snippet'>...</div>

</b:if></b:if>

Mẹo: Trong <b:if cond='data:post.isFirstPost'> bạn có thể thêm điều kiện bài viết sẽ xuất hiện hoặc không xuất hiện ở những trang nào như ví dụ bạn muốn chỉ xuất hiện ở trang label thì thêm điều kiện như sau:

Copy

<b:if cond='data:post.isFirstPost and data:view.isLabelSearch'>

Hoặc bạn không muốn xuất hiện ở trang chủ

Copy

<b:if cond='data:post.isFirstPost and !data:view.isHomepage'>

Mình lấy đoạn HTML tham khảo cho bài viết đầu tiên

Copy

<b:if cond='data:blog.pageType == "index"'>

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

<div class='post-first-thumb'>

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

<b:if cond='data:post.link'><a expr:href='data:post.link' expr:title='data:post.title'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/></a>

<b:else/><b:if cond='data:post.url'><a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/></a></b:if></b:if>

<b:else/>

<a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' src='http://1.bp.blogspot.com/-Nit_LiUtMHE/VflsSxNxENI/AAAAAAAADiM/CuVVm4SVl8E/s320/no-image.jpg'/></a>

</b:if>

<div class='post-article-content'>

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

<div class='post-first-title'><h2><b:if cond='data:post.link'><a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a><b:else/><b:if cond='data:post.url'>

<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></b:if></b:if></h2></div>

</b:if>

<div class='post-first-meta'>

<span class='label'>

<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url + &quot;?&amp;max-results=20&quot;' expr:title='data:label.name'><b:if cond='data:label.isLast == &quot;true&quot;'><data:label.name/></b:if></a></b:loop>

</span>

<abbr class='timeago' expr:title='data:post.timestampISO8601'><data:post.dateHeader/></abbr>

</div>

<div class='post-first-snippet'><data:post.snippet/></div>

</div>

</div>

<b:else/>

<div class='post-thumb'>...</div>

<div class='post-title'>...</div>

<div class='post-meta'>...</div>

<div class='post-snippet'>...</div>

</b:if></b:if>

Khi gọi được dữ liệu cho bài viết đầu tiên tiếp theo bạn cần tạo style cho bài viết này bằng cách viết css cho các class ảnh, tiêu đề, meta, tóm tắt cụ thể như ví dụ ở trên viết css cho các class: .post-first-thumb, .post-article-content, post-first-title h2, .post-first-meta .label,  .post-first-meta .timeago và .post-first-snippet.

Phần khó nhất đặt đoạn HTML gọi dữ liệu bài viết đầu tiên bạn hãy làm thật cẩn thận tốt nhất nên sao lưu theme trước khi thực hiện. Nếu bạn không làm được mà cần giúp đỡ thì để lại nhận xét bên dưới mình sẽ giúp.

Tags: Blogdữ liệuđiều kiệnlabelsao lưutemplatetheme