[Tips] - Thu gọn bài viết trang chủ Blogspot không dùng Js

Rút ngắn bài viết cho blogspot còn có tên gọi tiếng anh đó là Auto readmore, là cách thu gọn bài viết ở trang chủ hay là trang search label để hiển thị được nhiều bài viết hơn thay vì không thu gọn thì nó chỉ hiển thị có một bài trông không chuyên nghiệp lắm.

cách rút ngắn bài viết trang chủ blogspot

Cách thu gọn bài viết trang chủ blogspot không dùng js (javascript)

Các bạn thực hiện theo hai bước sau :

Bước 1. Đăng nhập vào blogger > mẫu > chỉnh sửa HTML. thêm đoạn css sau trên thẻ ]]></b:skin>
Css hiển thị hình ảnh bên trái

.post-thumbnail{float:left;margin-right:20px}

Css hiển thị hình ảnh bên phải

.post-thumbnail{float:right;margin-left:20px}

Bước 2. Tìm đến thẻ <data:post.body/>, thường thì blog có hai thẻ này, bạn chọn thẻ thứ hai, và thay nó bằng cách kiểu dưới
+ Kiểu 1 : Không có hình ảnh mặc định, tức là khi bài viết không có hình ảnh thì nó sẽ không hiển thị hình ảnh

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

+ Kiểu 2 : Có hình ảnh mặc định (no image) khi bài viết không có hình ảnh

<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifpKsOHPoo5COSX80KneqA6OZ2RtLIlTMxdIrtpUPWSm-kLsInyzvW3HqZ86J-fHHS4Fofq2wAcUXNYmCK82JX6z017SR6UWkg-OaWpetWGl8JbMQmagyCIba9fBFU7C3tXaiPmsVt3XiP/' 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>

+ Kiểu 3 : Có hình ảnh nhưng không hiển thị với bài viết mới nhất

<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <b:if cond='data:post.isFirstPost == "true"'> <data:post.body/> <b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> </div> </b:if> <b:else/> <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: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:if> <b:else/> <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: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:if> <b:else/> <data:post.body/> </b:if> <b:else/> <data:post.body/>
</b:if>

Trên đây là ba cách dùng để thu gọn bài viết trang chủ blogspot đơn giản không dùng tới js mà bạn nên dùng, rất hữu ích và giúp blogpsot load nhanh.