Namkna đã giới thiệu đến các bạn rất nhiều style Auto readmore không sử dụng javascript khác nhau (style 1 và style 2) cho Blogger với khả năng tăng tốc cho blog và thân thiện với các bộ máy tìm kiếm. Tuy nhiên nó có một nhược điểm là hình ảnh thumbnail tương đối nhỏ (chỉ được 72px rộng và cao). Bài viết này mình sẽ hướng dẫn một auto readmore mà mình có thay đổi đôi chút so với phiên bản gốc từ các mẫu cửa sổ hình ảnh của blogger mà hình ảnh được giữ nguyên kích cỡ ban đầu và tuyệt vời hơn nữa là cũng không cần đụng chạm đến javascript.
Auto readmore resize thumbnail không dùng scripts cho blogger (v3)

VIEW DEMO

¤ Một số ưu điểm.

» Hình ảnh được giữ nguyên kích cỡ ban đầu.
» Không ảnh hưởng đến tốc độ lòa của blog vì không dùng javarscrips.

 ¤ Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Tìm thẻ ]]></b:skin> (Mẹo: Bấm chuột vào một vị trí bất kỳ trong ô chỉnh sửa HTML vào để sử dụng khung tìm kiếm nội tuyến như bài này.) - Dán code bên dưới trước thẻ ]]></b:skin> vửa tìm được.
.img-thumbnail{margin:10px;border:1px solid #ccc;box-shadow:0 0 transparent inset,0 5px 0 -4px #fff,0 5px 0 -3px #ccc;padding:10px 0;width:150px;max-height:150px;text-align:center;float:left}
.img-thumbnail img{border:0;padding:0;width:150px;max-height:150px}
.img-thumbnail span{font-size:26px;line-height:70px;font-weight:bold}
.item-snippet {color: #999; font-family:Arial; font-size: 12px;text-align:justify}
5. Thay thế toàn bộ <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 class='img-thumbnail'>
   <b:if cond='data:post.firstImageUrl'>
    <img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
   <b:else/>
    <b:if cond='data:post.thumbnailUrl'>
     <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
    <b:else/>
     <span>No thumbnail</span>
    </b:if>
   </b:if>
  </div>
  <div class='item-snippet'><data:post.snippet/></div>
<div style='clear:both;'/>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
  <data:post.body/>
</b:if>

» Cập nhật.

1- Với mẫu SIMPLE (Mẫu đơn giản) của blogger thì bạn phải thay đoạn code bên dưới thành đoạn code ở bước 5.
<b:if cond='data:blog.metaDescription == &quot;&quot;'>
      <!-- Then use the post body as the schema.org description,
          for good G+/FB snippeting. -->
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    <b:else/>
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
        <data:post.body/>
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    </b:if>
2. Với các mẫu cửa sổ hình ảnh thì các bạn chỉ cần thực hiện đến bước 4 là xong vì mình lấy skin trong mẫu đó của bloggẻ mà :)
- Tiện ích chỉ lấy ảnh trên Picasa, video từ trang Youtube.com. Tự động hiển thị thông báo no thumbnail với bài viết không có hình ảnh và video.