Auto Readmore với Thumbnail nhỏ không dùng Javascript

Phương pháp auto readmore với hình ảnh đại diện nhỏ này sử dụng các thẻ sẵn có của blogger, và blog của bạn sẽ chạy nhanh hơn khi không sử dụng javascript

Bước 1

Thay đoạn mã  <data:post.body/> trong template của bạn bằng một trong các đoạn mã dưới đây, lưu ý là nếu template của bạn có 2 đoạn thì thay hết, nếu template của bạn có 3 đoạn thì thay mã thứ hai và thứ ba mà bạn tìm thấy :

Auto readmore với ảnh đại diện

<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-image' 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>

Auto readmore với ảnh đại diện và ả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-image' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
<b:else/>
<img class='post-image' alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL25YsoxiZaRvuhNwKKTL6AJk4IJ2oCOhlVyXb8Pzyew8NWVZhJAo7D7-6sMZUTiSSIB6wTBbQD4AJRLQZfkVfMWpMDRo_1USji715vCfnhMyHKE9KtuFVefYgpzvutWEk8L7DaUrAiW22/s1600/images9.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>

Bước 2

Bổ sung đoạn CSS sau trước ]]></b:skin> hoặc </style>:
- Hình ảnh hiển thị bên trái

 .post-image {float: left; margin-right: 12px}

- Hình ảnh hiển thị bên phải

  .post-image {float: right; margin-left: 12px}