Trước đây mình có share một đoạn script duy nhất để giúp các bạn tạo auto readmore với thumbnail, ưu điểm chỉ cần thay thế và chèn một lần duy nhất, nhưng nếu bạn để ý thì nó làm tốc độ tải trang chậm đi một ít vì nó xử lý lại thông tin được đưa ra ngoài trang chủ. Hôm nay, mình xin chia sẻ với các bạn cách tạo auto readmore với thumbnail hoàn toàn không sử dụng javascript của bác Duy Phạm, giúp blog bạn tải nhanh hơn rất nhiều.
Mình cũng đang sử dụng nó trên một số blog mà mình đang làm bạn có thể xem qua:
Auto readmore không sử dụng javascript cho Blogger
Ưu điểm của thủ thuật này là sử dụng những thứ có sẵn của Blogger giúp tốc độ tải nhanh hơn, nhược điểm thì không để kiểm soát được số lượng ký tự lấy ra từ bài viết, ảnh thumbnail hơi bé (mình sẻ chia sẻ cách khác phục này tại bai khác), và nếu bạn muốn hiểu có thể tham khảo qua các bài viết về thẻ lập trình của mình.
Tạo auto readmore với thumbnail
Bước 1: Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML
Bước 2: Các bạn tìm và thay thế toàn bộ thẻ sau
bằng một trong những đoạn mã sau:
1. Auto readmore với 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>
2. Auto readmore với hình ảnh và hiển thị ảnh mặc định cho bài viết không có ả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/AVvXsEjdOZLVA5Uv_Ba1RO7wDU7gwsA4WYnhOWU9fE4LJmuB3ewbl5Q7fhj_hkqAD_nRQ28S12Oyfp3EDCLtnhODj-4BsLK42FlajZZ7KgXxy8sn6OpGIFPT86dv0yHl2HJMGD25SjwIiyzae8xd//' 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>
3. Auto readmore với hình ảnh. Không readmore 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>
4. Auto readmore với hình ảnh và hiển thị ảnh mặc định cho bài viết không có ảnh. Không readmore 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:else/>
<img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdOZLVA5Uv_Ba1RO7wDU7gwsA4WYnhOWU9fE4LJmuB3ewbl5Q7fhj_hkqAD_nRQ28S12Oyfp3EDCLtnhODj-4BsLK42FlajZZ7KgXxy8sn6OpGIFPT86dv0yHl2HJMGD25SjwIiyzae8xd//' 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:else/>
<img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdOZLVA5Uv_Ba1RO7wDU7gwsA4WYnhOWU9fE4LJmuB3ewbl5Q7fhj_hkqAD_nRQ28S12Oyfp3EDCLtnhODj-4BsLK42FlajZZ7KgXxy8sn6OpGIFPT86dv0yHl2HJMGD25SjwIiyzae8xd//' 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>
Chọn vị trí của ảnh thumbnail
Bước 1: Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML
Bước 2: tìm đến thẻ ]]></b:skin> và thêm một trong 2 đoạn CSS sau vào bên trên
1. Hiển thị hình ảnh bên trái:
.post-thumbnail{float:left;margin-right:20px}
2. Hiển thị hình ảnh bên phải:
.post-thumbnail{float:right;margin-left:20px}
Lời kết
Do trong bài thẻ data thiếu nên mình giải thích thêm, thẻ <data:post.snippet/> của Blogger là thẻ lấy ra 140 ký tự từ bài viết, thẻ này thường được thấy trong widget "Bài đăng phổ biến". Duy Phạm là một trong những cao thủ về Blogger, anh ấy chia sẻ rất nhiều thủ thuật độc và lạ, và là một trong những nguồn cảm hứng để mình làm ra blog này :)
"nguồn bài viết từ KslZone.NET".
