Auto Readmore-Tự động tóm tắt bài viết có ảnh thumbnail không dùng javascript cho blogspot

Đây là thủ thuật Auto Readmore-tự động tóm tắt bài viết ở trang chủ có ảnh thumbnail và có ảnh thay thế khi bài viết không có ảnh cho blogspot không sử dụng javascript, việc không sử dụng javascript nên tối ưu cho tốc độ load của blog. Thủ thuật này là của DuyPham mình đã xài nên lưu trữ tại đây ai thích thì lấy dùng

Vài nét khái quát về thủ thuật này

- Không sử dụng javascript hỗ trợ.
- Tự động lấy thẻ alt theo tiêu đề bài viết.
- Ảnh thumbnail với kích cỡ 72x72 và đoạn trích dẫn.

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:20px;border:1px solid #005595;border-radius:5px; background:#D2ECF5;width:72px;height:72px;padding:3px}

Trong đó đoạn bôi xanh mình thêm vào cho ảnh thumbnail thêm đẹp.
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;'>
<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='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png' 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>

Lưu ý: Để có ảnh thumbnail thì ảnh cần up thẳng lên blog hay ảnh up lên picasa rồi dẫn link về bài viết.
Nguồn DuyPham