Cách thu gọn bài viết trang chủ blogspot không dùng js (javascript)
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/>+ 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>
<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/>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.
</b:if>
Icon CommentsIcon Comments