Auto readmore với thumbnail không sử dụng javascript cho Blogger

Trước đây mình có share một đoạn script duy nhất để giúp các bạn tạo auto readmore với thumbnail, ưu điểm chỉ cần thay thế và chèn một lần duy nhất, nhưng nếu bạn để ý thì nó làm tốc độ tải trang chậm đi một ít vì nó xử lý lại thông tin được đưa ra ngoài trang chủ. Hôm nay, mình xin chia sẻ với các bạn cách tạo auto readmore với thumbnail hoàn toàn không sử dụng javascript của bác Duy Phạm, giúp blog bạn tải nhanh hơn rất nhiều.

Auto readmore với thumbnail không sử dụng javascript cho Blogger

Mình cũng đang sử dụng nó trên một số blog mà mình đang làm bạn có thể xem qua:

Auto readmore không sử dụng javascript cho Blogger

Ưu điểm của thủ thuật này là sử dụng những thứ có sẵn của Blogger giúp tốc độ tải nhanh hơn, nhược điểm thì không để kiểm soát được số lượng ký tự lấy ra từ bài viết, ảnh thumbnail hơi bé (mình sẻ chia sẻ cách khác phục này tại bai khác), và nếu bạn muốn hiểu có thể tham khảo qua các bài viết về Blogger XML.
Tạo auto readmore với thumbnail
Bước 1: Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML

Auto readmore với thumbnail không sử dụng javascript cho Blogger

Bước 2: Các bạn tìm và thay thế toàn bộ thẻ sau
<data:post.body/>
bằng một trong những đoạn mã sau:

1. Auto readmore với hình ảnh:
<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: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>
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:
<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>
3. Auto readmore với hình ảnh. Không readmore với bài viết mới nhất:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <data:post.body/>
     <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
       <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a> 
      </div>
     </b:if>
   <b:else/>
    <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: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:if>
  <b:else/>
   <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: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:if>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>
4. Auto readmore với hình ảnh và hiển thị ảnh mặc định cho bài viết không có ảnh. Không readmore với bài viết mới nhất:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
    <data:post.body/>
     <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
       <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a> 
      </div>
     </b:if>
   <b:else/>
    <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:if>
  <b:else/>
   <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:if>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>
Chọn vị trí của ảnh thumbnail
Bước 1: Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML

Auto readmore với thumbnail không sử dụng javascript cho Blogger

Bước 2: tìm đến thẻ ]]></b:skin> và thêm một trong 2 đoạn CSS sau vào bên trên
1. Hiển thị hình ảnh bên trái:
.post-thumbnail{float:left;margin-right:20px}
2. Hiển thị hình ảnh bên phải:
.post-thumbnail{float:right;margin-left:20px}

Lời kết
Do trong bài thẻ data thiếu nên mình giải thích thêm, thẻ <data:post.snippet/> của Blogger là thẻ lấy ra 140 ký tự từ bài viết, thẻ này thường được thấy trong widget "Bài đăng phổ biến". Duy Phạm là một trong những cao thủ về Blogger, anh ấy chia sẻ rất nhiều thủ thuật độc và lạ, và  là một trong những nguồn cảm hứng để mình làm ra blog này :)

Thêm một tẹo nhỏ, mình xin giới thiệu Auto readmore với thumbnail 2014 do mình làm ra, khá là tối ưu và nhiều tính năng nhất cho người dùng.

21 bình luận

  1. avatar voquocan says

    lúc 21:43 26 tháng 1, 2014

    Nếu mình không nhầm thì thủ thuật này 2 năm trước trang thuthuatblogger.info đã viết rồi và mình cũng từng sử dụng qua.
    Thủ thuật này có 2 ưu điểm. 1 là không sử dụng javascript nên tốc độ load cao. 2 là tiện lợi khỏi phải chèn ngắt trang mỗi lần viết bài.
    Nhưng đồng thời nó cũng mang 2 nhược điểm. 1 là cái này chỉ lấy ra 140 ký tự muốn nhiều hơn cũng bó tay, nội dung đoạn đầu quá ngắn nên chưa tóm tắt đc hết nội dung của bài viết. 2 là nếu dùng cái auto readmore này mà trong bài viết không có ngắt trang thì blog sẽ rất dễ bị hack data :(
    thuthuat.voquocan.com

  2. avatar says

    lúc 21:52 26 tháng 1, 2014

    Mày thấy blog của Duy Phạm đăng vào năm 2011, nên chắc nguồn của anh ấy :D

  3. avatar says

    lúc 02:11 29 tháng 6, 2014

    hix mình làm theo hướng dẫn nhưng nó vẫn tự động tạo thumbnail với những bài có ảnh (tự động lấy ảnh đầu tiên làm thumbnail) nhưng với những bài viết toàn chữ thì nó vẫn không hiện ảnh mình đặt sẵn. Mà nó chỉ hiện khung trắng nếu trên chrome còn hiện chữ trùng với title trên fire fox. Bạn có thể chỉ rõ hơn giúp mình được không. Thank

  4. avatar says

    lúc 09:45 29 tháng 6, 2014

    Bạn sử dụng đoạn mã nào vậy bạn? Với lại để lại cho mình địa chỉ website mình xem thử nhé.

  5. avatar says

    lúc 15:29 8 tháng 7, 2014

    Có rất nhiều thẻ và mình thay đổi thẻ mình tìm thấy bằng Ctrl + F đầu tiên nhưng sao nó không hoạt động bạn, hay mình thay sai

  6. avatar says

    lúc 15:45 8 tháng 7, 2014

    Đúng đấy bạn, bạn phải thay đổi tất cả nhé, có 2 -> 3 thẻ như thế nếu mình ko lầm.

  7. avatar says

    lúc 08:15 2 tháng 1, 2015

    Làm sao để di chuyển cái title sang bên phải , cùng hàng với ảnh như trong demo hả anh

  8. avatar says

    lúc 00:39 31 tháng 3, 2015

    Bạn ơi cho mình hỏi ,mình lấy một cái theme và cài đặt lên site mình, nhưng mình tìm cách thay thê chữ "Read More" thành "Đọc thêm" không được....Thường thì mình hay mò tìm bằng cách vao chỉnh code mình Ctrl + F để tìm từ "Read More" và thay thế nhưng lần này không tìm được... Không biết có cách nào để đổi từ "Read More" kia thành "Đọc Thêm" không bạn. Cái theme nó có sẵn vậy rồi : http://uocmodanloi.blogspot.com/

  9. avatar says

    lúc 08:15 31 tháng 3, 2015

    Nhìn sơ qua mình biết chắc chắn nó nằm trong đoạn auto readmore bị mã hóa rồi, bạn đơn giản có thể dùng css ẩn cái cũ đi, và thay thể bằng nút mới tự tạo. Nếu không biết để khi về mình sẽ hướng dẫn cho :D

  10. avatar says

    lúc 20:18 31 tháng 3, 2015

    Hay quá, bạn hướng dẫn mình làm với ! Mấy cái code bị mã hóa mình không biết làm sao để ẩn đi và thay vào cái mới! Không biết bạn đã có bài viết nào về vấn đề này chưa ?

  11. avatar says

    lúc 20:56 31 tháng 3, 2015

    Bạn thử chèn luôn đoạn này lên trên thẻ </body> nhé
    <script type="text/javascript">
    function doiten(){ // function declaratioon
    var str = document.getElementById("Blog1").innerHTML;
    var res = str.replace((/Read More/g, "W3Schools");
    document.getElementById("Blog1").innerHTML = res;
    }
    doiten();
    </script>
    mình viết script nhỏ luôn cho bạn đỡ cực.

  12. avatar says

    lúc 22:31 31 tháng 3, 2015

    Chữ "Read More" vẫn chưa đổi bạn ơi ? Giờ làm sao để nó đổi ?

  13. avatar says

    lúc 20:00 1 tháng 4, 2015

    Sorry bạn, code mình làm dư vài kí tự, thử lại nha
    <script type='text/javascript'>
    function doiten(){
    var str = document.getElementById("Blog1").innerHTML;
    var res = str.replace(/Read More/g,"Đọc tiếp");
    document.getElementById("Blog1").innerHTML = res;
    }
    doiten();
    </script>

  14. avatar says

    lúc 21:18 1 tháng 4, 2015

    Đã đổi được rồi, hay quá bạn :) cảm ơn bạn nhiều nha ! Nhưng không biết giờ mình muốn hỏi thêm nữa có làm phiền bạn quá không?

  15. avatar says

    lúc 21:44 1 tháng 4, 2015

    Không sao bạn cứ hỏi mình sẽ trả lời :D

  16. avatar says

    lúc 23:50 1 tháng 4, 2015

    Mình reply lại rồi mà không biết lỗi do mình hay sao mà không thấy nó hiện lên ta ? Lúc đầu thấy mà sao lát vào lại không thấy nữa nhỉ ? Khung comment bị lỗi hay do mình vậy bạn ?

  17. avatar says

    lúc 21:12 14 tháng 4, 2015

    Có cách nào để làm cho cái hình lớn hơn 72 px không thế, 1 đoạn CSS hay .js chẳng hạn. Cần lắm :)

  18. avatar says

    lúc 21:16 14 tháng 4, 2015

    anh có thể kết hợp css với cái này http://www.kslzone.net/2014/05/resize-va-cat-anh-thumbnail-ung-kich.html

  19. avatar says

    lúc 12:19 29 tháng 4, 2016

    bài viết rất hay .

  20. avatar says

    lúc 12:22 29 tháng 4, 2016

    cho mình hỏi trang này là blogspot hả .

  21. avatar says

    lúc 12:42 29 tháng 4, 2016

    Đúng rồi site mình làm bằng blogspot.

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.