Auto readmore resize thumbnail không dùng scripts cho blogger

Auto readmore không sử dụng javascript 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. Bài viết này mình sẽ hướng dẫn một auto readmore mới 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.

¤ 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 sau 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 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>

- Hình ảnh phải được lưu trên Picasa, video từ Youtube. Tự động hiển thị thông báo với bài viết không có hình ảnh và video.

Nguồn Blog namkna