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

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 read more 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, dưới đây là hướng dẫn giúp bạn làm được điều đó.

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,150,"1:1")' width='150' height='100'/>
<b:else/>
<img class='post-thumbnail' alt='no image' src='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png' width='150' height='100'/>
</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.

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.



Nhận xét

2 nhận xét :

  1. Treo link ko bác: http://www.vietncn.com/

    Trả lờiXóa
    Trả lời
    1. Mình chỉ để link của 2 người bạn từ ngày đầu blogspot và ko liên kết thêm nữa.

      Xóa