Tự Động Tóm Tắt Bài Viết Có Ảnh Thumbnail Không Dùng Javascript

Đây là thủ thuật 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,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 để khi nào không xài nữa còn biết lối tháo gỡ và ai thích thì lấy dùng :D


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>