Auto Readmore with Thumbnail chuẩn 2014

Sau khi đã chia sẻ với các bạn hai thứ đó là Auto Readmore không thumbnail cho Blogger Lấy ra ảnh đầu tiên của bài viết của Blogger, thì hôm nay kết hợp chúng lại mình xin đưa ra auto readmore chuẩn nhất. Chuẩn ở đây có nghĩa là tối ưu nhất về cả tính năng lẫn tốc độ xử lý của nó.

Auto Readmore width Thumbnail chuẩn 2014

Auto Readmore thì chắc ai cũng biết rồi, mà thôi cứ giải thích cho nó dài bài ra, haha. Đối với đoạn mã mình chia sẻ ở đây là kết hợp giữa Javascript mà đoạn mã mặc định của Blogger, giúp tự động cắt đoạn văn bản dài thòng ở trang chủ trở nên ngắn gọn theo quy định của chúng ta, và đồng thời lấy ra hình ảnh đầu tiên đặt vào vị trí bên trái hoặc phải giúp mô tả cho bài viết đó.

Auto Readmore with Thumbnail chuẩn 2014

Tương tự như những đoạn Auto Readmore mà mình đã chia sẻ, bạn tìm đến thẻ </head> và chèn lên nó
<script type='text/javascript'>//<![CDATA[
function removeHtmlTag(strx, chop) {
    if (strx.indexOf("<") != -1) {
        var s = strx.split("<");
        for (var i = 0; i < s.length; i++) {
            if (s[i].indexOf(">") != -1) {
                s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length);
            }
        }
        strx = s.join("");
    }
    chop = (chop < strx.length - 1) ? chop : strx.length - 2;
    while (strx.charAt(chop - 1) != ' ' && strx.indexOf(' ', chop) != -1) chop++;
    strx = strx.substring(0, chop - 1);
    return strx + '...';
}

function createSummary(pID) {
    var div = document.getElementById(pID);
    var summ = 150;
    var summary = '<div><p>' + removeHtmlTag(div.innerHTML, summ) + '</div></p>';
    div.innerHTML = summary;
}
//]]></script>
Tiếp tục thay thế toàn bộ đoạn mã sau
<data:post.body/>
nếu không muốn có ảnh thumbnail mặc định khi không có ảnh thì bằng đoạn này
<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <b:if cond='data:post.firstImageUrl'>
    <div class='postThumb'>
      <img expr:src='data:post.firstImageUrl' expr:title='data:post.title' expr:alt='data:post.title'/>
    </div>
   </b:if>
  <div expr:id='&quot;summary&quot; + data:post.id'>
   <data:post.body/>
  </div>
<script type='text/javascript'> createSummary(&quot;summary<data:post.id/>&quot;);</script>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>
còn nếu muốn có ảnh thumbnail mặc định thì dùng cái này
<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <b:if cond='data:post.firstImageUrl'>
   <div class='postThumb'>
     <img expr:src='data:post.firstImageUrl' expr:title='data:post.title' expr:alt='data:post.title'/>
    </div>
   <b:else/>
    <div class='postThumb'>
     <img src='http://3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w360-h220-c/no-image.png' expr:alt='data:post.title' expr:title='data:post.title' />
    </div>
   </b:if>
  <div expr:id='&quot;summary&quot; + data:post.id'>
   <data:post.body/>
  </div>
<script type='text/javascript'> createSummary(&quot;summary<data:post.id/>&quot;);</script>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>
Cuối cùng để trang trí cho nó bạn chèn đoạn css sau lên trên thẻ ]]></b:skin>
.postThumb { float: left; margin-right: 20px; width: 300px; height: 250px }
bạn có thể tự tủy chỉnh lại theo ý mình và lưu lại.

Lời kết

Thì đây là đoạn mã mình nghĩ là ngon nhất trong tất cả đám auto readmore rồi. Trong trường hợp bạn không thích hình ảnh méo mó vì css thì bạn có thể xem qua bài viết Resize và cắt ảnh nhiều thành phần của Blogger, bạn hãy sử dụng nó với id là #Blog1 và nhớ đặt nó trong đoạn mã:
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
ĐOẠN JS
</b:if></b:if>
để nó khỏi cắt cả mấy hình trong khi xem tại trang bài viết nữa nhé.

28 bình luận

  1. avatar says

    lúc 06:15 26 tháng 7, 2014

    demo giống bạn hả ta

  2. avatar says

    lúc 17:38 27 tháng 7, 2014

    hihi mình mới toàn bộ hệ thống comment mới hoàn toàn chuẩn CSS3 và HTML5 rồi bạn xem thử xem được không

  3. avatar says

    lúc 18:13 27 tháng 7, 2014

    Cái này cũng như cái của mình share mà thay giao diện thôi :D, test cũng thế.

  4. avatar says

    lúc 19:19 27 tháng 7, 2014

    cái của lâm đâu fix chuẩn HTML5 và CSS3 đâu

  5. avatar says

    lúc 19:21 27 tháng 7, 2014

    ở đây mình thay toàn bộ CSS và code comment luôn đó nha

  6. avatar says

    lúc 19:23 27 tháng 7, 2014

    =]]
    http://www.kslzone.net/2014/07/binh-luan-phan-cap-hack-cho-blogger.html

    http://www.kslzone.net/2014/07/trang-bai-viet-blogger-chuan-html5.html
    thì mình tách 2 ra bài viết, mà mình tạo thảng includable mới chứ có gì đâu trời :3

  7. avatar says

    lúc 19:24 27 tháng 7, 2014

    Thích thì demo luôn này
    http://kslgenesis.blogspot.com/2014/07/sample-post-with-threaded-comments.html

  8. avatar says

    lúc 19:24 27 tháng 7, 2014

    http://www.bloggerplugins.xyz/2014/07/resize-and-crop-thumbnail-image.html

  9. avatar says

    lúc 20:48 4 tháng 9, 2014

    Auto Readmore không dùng javascript thì đoạn trích dẫn ngắn ngủn thì cũng chán

    Nếu dùng loại Auto Readmore sử dụng text/javascript thường đặt 1 đoạn javascript bên trên thẻ </head&gt, làm như vậy liệu SEO có bị ảnh hưởng nhiều không bạn.

    Mình đang phân vân điều này

  10. avatar says

    lúc 20:52 4 tháng 9, 2014

    Ngoại trừ "meta" "title" và một số thẻ đánh dấu dữ liệu, thì tất cả những thẻ nào khác "script" rồi "link" không có ảnh hưởng đến SEO trên website của chúng ta. Bạn có thể tham khảo qua bất gì website nào, mình tin rằng 99% website bây giờ đều có script trên thẻ "head" nhé.

    Điều mà những đoạn script ảnh hướng đến website chúng ta chủ yếu là tốc độ tải của website đó thôi.

  11. avatar says

    lúc 21:18 4 tháng 9, 2014

    Vậy thì cũng yêu tâm rồi :)

  12. avatar Nặc danh says

    lúc 21:52 12 tháng 11, 2014

    Chào Lâm.

    Trong Template của tớ có 4 đoạn như thế này :
    Nếu thay bằng nùi mã kia vào đoạn đó sẽ báo lỗi. Không biết phải chèn như thế nào.
    Tớ xóa đoạn mã và thay bằng nùi mã đó không biết có phải không.

  13. avatar says

    lúc 22:24 12 tháng 11, 2014

    Bạn sử dụng cái chuyển mã HTML ở menu thứ 2 của mình nha, rồi dán đoạn mã đã được convert vào đây nếu không nó bị ẩn hết ^_^

  14. avatar says

    lúc 10:20 8 tháng 6, 2015

    em dùng cái này cho template đơn giản của anh hướng dẫn không đc. demo downloadfullaz.blogspot.com

  15. avatar says

    lúc 14:27 10 tháng 6, 2015

    Hôm nay hì hục thay cái này vào temp. Chỉ có thể nói là tuyệt (y). Ảnh hiện rất đẹp

    Cảm ơn bạn trẻ nhiều :)

  16. avatar says

    lúc 20:23 10 tháng 6, 2015

    Thanks anh Thọ :D

  17. avatar says

    lúc 23:34 10 tháng 6, 2015

    Mình đã chèn data:post.title như sau và khi xem ở bài viết thì không hiển thị đường link. Có cách nào khắc phục không?
    Giúp với :v

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:post.firstImageUrl'>
    <div class='postThumb'>
    <img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/>
    </div>
    </b:if>



    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.title'>
    <h2 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'>
    <data:post.title/>
    </a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'>
    <data:post.title/>
    </a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h2>
    </b:if>
    <b:else/>
    <h1 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'>
    <data:post.title/>
    </a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'>
    <data:post.title/>
    </a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h1>
    </b:if>




    <div expr:id='&quot;summary&quot; + data:post.id'>
    <data:post.body/>
    </div>
    <script type='text/javascript'>
    createSummary(&quot;summary<data:post.id/>&quot;);</script>
    <b:else/>
    <data:post.body/>
    </b:if>
    <b:else/>
    <data:post.body/>
    </b:if>

  18. avatar says

    lúc 20:53 11 tháng 6, 2015

    Là sao em có chút không hiểu data:post.title là cú pháp gọi ra thẻ tiêu đề mà?

  19. avatar says

    lúc 07:54 12 tháng 6, 2015

    Nghĩa là chèn đoạn này vào giữa đoạn code ở bước 2 và nó ko hiển thị ở phần bài viết luôn

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.title'>
    <h2 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'>
    <data:post.title/>
    </a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'>
    <data:post.title/>
    </a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h2>
    </b:if>
    <b:else/>
    <h1 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'>
    <data:post.title/>
    </a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'>
    <data:post.title/>
    </a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h1>
    </b:if>


    Ngay trong đêm đó anh thay lại cái autoreadmore mới, nhưng nó chạy chậm quá, xót hết cả ruột, gan, mề, lòng, bao tử, tim, phè, phổi :v

  20. avatar says

    lúc 07:57 12 tháng 6, 2015

    Có cách nào tách biệt data hiển thị ảnh và data đoạn trích dẫn để chèn cái data tiêu đề vào giữa mà tiêu đề không bị ẩn?

    Mục đích để cho cái tiêu đề nằm ngang với tấm hình nhìn cho đẹp ấy mà

  21. avatar says

    lúc 07:59 12 tháng 6, 2015

    Vì nguyên nhân tiêu đề bị ẩn là do nó nằm trong:
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

    </b:if>
    </b:if>

  22. avatar says

    lúc 21:36 12 tháng 6, 2015

    Vậy là anh giải quyết xong rồi phải không :D

  23. avatar says

    lúc 01:04 14 tháng 6, 2015

    Đến giờ thì vẫn chưa :v

    Muốn dùng cái auto reamore này nhưng chưa biết cách sao cho title ở ngang hình ảnh

  24. avatar says

    lúc 01:05 14 tháng 6, 2015

    Cái autoreadmore anh đang dùng anh chưa hài lòng lắm :( . Có vẻ nó hơi chậm

  25. avatar says

    lúc 10:35 14 tháng 6, 2015

    Cái này em thấy là nhanh nhất rồi đó anh, nó chỉ cắt lấy ra đoạn chữ đầu bài, còn hình ảnh thì Blogger tự lấy ra.

  26. avatar says

    lúc 20:17 14 tháng 6, 2015

    Thế ư. Cảm ơn em

    Cho anh hỏi ngoài lề tí: trước đây blog của anh lượng truy cập đều đều trên các quốc gia, nhưng 3-4 ngày nay CHỈ CÓ LƯỢNG TRUY CẬP TỪ HOA KỲ VÀ VIỆT NAM. Lượng truy cập từ Hoa Kỳ tăng khủng khiếp.

    Blog của em thấy có thế không ?

  27. avatar says

    lúc 08:29 15 tháng 6, 2015

    Blog của em bị lỗi bạo luôn anh ơi, 100% từ Hoa Kì từ xưa tới giờ :D

  28. avatar says

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

    Giờ chỉ có coi từ Analytics là đúng thôi, vẫn 80 Việt Nam, 10% Nga, 5 % Hoa kì, còn lại là những nước khác.

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.