Auto Readmore-Tự động tóm tắt bài viết không dùng javascript với ảnh thumbnail tùy chỉnh kích thước ảnh

Auto readmore có rất nhiều dạng nhưng về cơ bản chia thành 2 loại là:

- Không dùng javascript
- Có sử dụng javascript

Về ưu nhược điểm của từng loại thì chắc nhiều bạn cũng đã biết.

- Với loại dùng javascript thì có thể thay đổi kích thước ảnh và số ký tự đoạn trích dẫn tùy ý mà không sợ làm giảm chất lượng ảnh, có thể nhận ảnh từ bên thứ 3...Nhưng vì có js nên ảnh hưởng tới tốc độ load.
- Với loại không dùng javascript thì load nhanh nhưng ảnh mặc định từ host blogger là 72x72 nếu size lớn hơn ảnh sẽ bị mờ.

Đoạn trích dẫn chỉ gồm 140 ký tự, và việc ngắt ký tự không chú ý tới ký tự trống nên có câu bị mất vài từ trở nên vô nghĩa.

Chỉ nhận ảnh tải trực tiếp lên blogger hoặc host của google không nhận ảnh của bên thứ 3, có nghĩa là những bài copy cả link ảnh từ trang không phải blogspot thì sẽ không có ảnh thumbnail.

Để có thể dùng auto read more không dùng javascript mà vấn có thể đảm bảo chất lượng ảnh khi tùy chỉnh kích thước ảnh thumbnail, và có thể thay đổi số ký tự đoạn trích dẫn dưới đây là hướng dẫn giúp bạn làm được điều đó.

Auto Readmore-Tự động tóm tắt bài viết không dùng javascript với ảnh thumbnail tùy chỉnh kích thước - Auto readmore not javascript with custom thumbnail size

Các bước thực hiện:
Bước 1: Thêm class post-thumbnail để hiển thị hình ảnh.
Thêm đoạn mã dưới đây vào bên trên thẻ ]]></b:skin>

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

Bước 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:
Thay thế <data:post.body/> bằng đoạn mã dưới đây:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl,250,"16:9")' width='250' height='160'/>
<b:else/>
<img class='post-thumbnail' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiTNkf4FicQntbH23rLKV0t2ws8E8yNWVHZljcmCh88yX8Qrr_IMO4p7zS0-UUzLprVjuJdsJMcbzeDfxlHQsFDaop9DAYIIyo7WaC3xjfkt26N2UzURGbBsS4rk2UMDhM4GKjTRzFiHzM/' width='250' height='160'/>
</b:if>
<data:post.snippet/>
<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>

Bạn điều chỉnh các trị số bôi màu cam và vàng chanh theo ý và phù hợp.
Thay đổi số ký tự đoan trích dẫn-snippet
Để thay đổi số ký tự đoạn trích dẫn bạn thay

<data:post.snippet/>

ở trong code trên thành

<b:eval expr='data:post.body snippet { length: 150, links: false, linebreaks: false, ellipsis: true }'/>

Trong đó bạn có thể thay đổi trị số 150 để thay đổi số ký tự đoạn trích dẫn.
Nếu không muốn có 3 dấu chấm cuối đoạn trích dẫn thì sửa

ellipsis: true

Thành

ellipsis: false

Ngoài lề
Khắc phục Auto read more không nhận ảnh từ bên thứ 3
Với những bài viết copy toàn diện từ một trang không phải blogspot(link ảnh không phải của blogger hoặc google photo) bạn có thể khắc phục bằng cách sau:
Vào chỉnh sửa mẫu tìm những đoạn

data:post.thumbnailUrl

Thay tất cả thành

data:post.firstImageUrl

Nếu sử dụng code read more hướng dẫn ở trên thì bạn cần sửa lại những đoạn (data:post.thumbnailUrl) trong code trước khi cài đặt.