Hướng dẫn thu gọn bài viết trên trang chủ

Chắc hẳn các bạn đã thấy rất nhiều blog nói về thủ thuật này rồi. Tuy nhiên, trong bài viết này, mình sẽ chỉ đưa ra thủ thuật mà mình cho là tối ưu nhất đối với blog của bạn thôi.

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

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
   <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='http://doiguocmoc.com/wp-content/uploads/2015/11/bannerdgm.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>

Các bạn cũng nên chú ý 1 chút trong đoạn code trên. Với các này thì chúng ta sẽ sử dụng Thumbnail mặc định của blogger có kích thước là 72x72 nhé. Và số ký tự rút gọn được hiển thị là 140 ký tự. Và http://doiguocmoc.com/wp-content/uploads/2015/11/bannerdgm.png là link hình ảnh khi mà bài viết của các bạn không có hình ảnh nào là tự Upload lên.

Chỉ đơn giản vậy thôi, bây giờ các bạn lưu Template lại và ra xem trang chủ nhé. Còn việc viết CSS như thế nào cho đẹp thì đó là do khả năng của bạn. Mình không thể viết hết ra được.

Các bạn có thể xem DEMO tại đây: http://huongdanthietketamplate-6.blogspot.com/

Chú ý: Đây là cách dùng những thẻ mặc định của Blogger nên sẽ có tốc đợ tải tốt nhất. Tuy nhiên, ngoài cách này cũng còn nhiều cách khác được chia sẻ trên mạng. Tuy nhiên, đa số đều sử dụng tới Javascript nên có thể sẽ làm trậm trang web của bạn. Tuy nhiên, nó có thể thùy biến nhiều hơn. Bạn hãy cân nhắc trước khi dùng nhé!