Auto read more hiện thị thumbnail

Hôm nay mình sẽ hương dẫn các bạn tạo auto read more cho blog, auto read more là một tiện ích tự đông tạo tạo phần trích dẫn cho bài viết của bạn một cách hoàn toàn tự động. Với tiện ích mà mình sẽ giới thiệu với các bạn thì sẽ không cần phải đụng tới một chút Script nào. Mặc dù cái này tự động tạo trích dẫn nhưng với mỗi bài viết bạn phải đặt dấu ngắt nhảy read more.

#Thêm CSS

1. Đăng nhập Blogger
2. Mẫu > Chỉnh sửa HTML
3. Tìm thẻ ]]></b:skin>
4. Dán code dưới vào trên thẻ mà bạn vừa tìm

dp-thumbnail{margin-bottom:20px;border:1px solid #ccc;box-shadow:0 0 transparent inset,0 5px 0 -4px #fff,0 5px 0 -3px #ccc;padding:10px 0;width:100%;height:90px;text-align:center}
.dp-thumbnail img{border:0;padding:0;max-width:96%;max-height:90px}
.dp-thumbnail span{font-size:26px;line-height:70px;font-weight:bold}

#Thêm HTML

Bước này sẽ có sự khác nhau giữa mẫu mặc định của Blogger và các mẫu do người khác viết.

1. Với mẫu mặc định của Blogger thì bạn hãy tìm code dưới

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

Với các mẫu do người khác viết mà bạn tải trên mạng về thì bạn hãy tìm code dưới

<data:post.body/>

2. Thay code bạn vừa tìm bằng đoạn code dưới

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div class='dp-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>
  <data:post.snippet/>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>    

Với các mẫu tải trên mạng về sẽ có nhiều đoạn <data:post.body/> thì bạn phải thay cho hết
3. Lưu mẫu lại và kiểm tra kết quả. mọi thắc mắc xin để lại bình luận ở phía dưới.

Duy Phạm