Bài 5: Thu gọn bài viết trên trang chủ trong blogspot

Khi đã thực hiện qua 4 bài trong Seri hướng dẫn thiết kế một Template Blogger, các bạn đã bước đầu định hình được cách chia bố cục, cách thức hoạt động, cũng như thêm mới các widget.

Tiếp theo mình sẽ hướng dẫn các bạn làm sao để thu gọn bài viết trên trang chủ trong blogspot, vì qua 4 bài trước bạn nhận thấy các bài viết đang hiển thị  toàn bộ nội dung đến nỗi trang chủ trang blog của bạn nó quá dài và xấu xí.

Thu gọn bài viết trên trang chủ trong blogspot

Thôi, không dài dòng, mình cũng bắt đầu.

Chú ý; Trước khi thực hiện bất cứ 1 thủ thuật hay thay đổi nào trong Code Template Blogger của bạn, hãy sao lưu nó ra 1 bản để nếu bị lỗi thì bạn có thể hô phục lại được.
Xem thêm: cách sao lưu Template Blogger

Bạn hãy tìm đến thẻ <data:post.body/>. Thường sẽ có 2 đoạn code như vậy. Và nó sẽ là đoạn thứ 2 từ trên xuống.

Thay thế nó bằng đoạn code:
[code type="HTML"]<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
<b:else/>
<img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Q5vqGjLdhVtJHksF1A9ukZov9lb4-mnmDMHZipfdWDncbMARrNGQ_dWnz9tYhsWHWzwU5ugGExuyfzUyWXJ3zhtEjiLcbv9VOUjiqdifdSn2RpHiPchTUHAvBbjlrUvIS-kHqYOfF0LD/s1600/no-image.png' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>[/code]
Lưu chủ đề để thấy kết quả

Với đoạn code trên : 
+ Thumbnail mặc định của blogger có kích thước là 72×72.
+ Số ký tự rút gọn được hiển thị là 140 ký tự

Với CSS thì tùy các bạn tùy chỉnh theo ý thích của mình, còn nếu không bạn có thể áp dụng mẫu CSS này để được đẹp hơn:

[code type="CSS"].post-outer { margin: 5px; background: #eff3dd; border: 1px solid #DEDEDE; }[/code]
Đây là đoạn code dùng các thẻ của blogspot mình dùng để tối ưu tốc độ load trang web của bạn, nhưng nó sẽ có 1 số hạn chế nhất định đó là kích thước là ảnh Thumbnail là 72×72 và số kí tự hiển thị là 140. Nếu bạn muốn nó có kích thước lớn hơn hoặc số ký tự nhiều hơn thì bạn có thể áp dụng 1 số thủ thuật trên mạng dùng Javascript, nhưng chắc chắn Javascript sẽ ảnh hưởng 1 phần đến tốc độ load trang của bạn.

Chúc bạn thành công!