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 != &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://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à 72×72 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é!

Bài viết cùng Serie<< Hướng dẫn hiển thị danh sách bài viết ra ngoài trang webThêm chức năng “Thêm tiện ích” cho Sidebar của bạn >>
Cùng chuyên mục:

Add Comment

18 Comments

  1. du hoc nhat ban 2016
    6 Bình luận
    20/05/2016
    • Đôi Guốc Mộc
      Admin
      21/05/2016
      • du hoc nhat ban 2016
        6 Bình luận
        25/05/2016
  2. co nhan tao
    14 Bình luận
    17/06/2016
    • Đôi Guốc Mộc
      Admin
      17/06/2016
  3. vannguyen
    14 Bình luận
    20/07/2016
    • Đôi Guốc Mộc
      Admin
      20/07/2016
  4. Hiệp vũ
    1 Bình luận
    01/08/2016
    • Mộc
      Admin
      01/08/2016
  5. Hung
    2 Bình luận
    16/11/2016
    • Mộc
      Admin
      16/11/2016
      • Hung
        2 Bình luận
        17/11/2016
  6. Quan
    1 Bình luận
    23/12/2016
    • Mộc
      Admin
      24/12/2016
      • Quốc Bình
        3 Bình luận
        10/04/2018
  7. Quân
    1 Bình luận
    24/12/2016
  8. Anh
    1 Bình luận
    20/03/2017
  9. Quốc Bình
    3 Bình luận
    10/04/2018