Chia đều bài viết trong blogger với Auto Read more

Auto Readmore Blogger giúp thu gọn bài viết trang chủ

Trong Blogger có sẵn tiện ích Read More (Ngắt trang), nhưng nếu bạn muốn trang chủ tự động thu gọn bài viết mà không cần cắt thủ công bằng tay mỗi khi đăng bài thì giải pháp Auto Readmore là lựa chọn hoàn hảo.

Tùy vào phong cách trang web, việc bật Auto Readmore sẽ giúp bố cục bài viết ngoài trang chủ sắp xếp đều đặn, gọn gàng và chuyên nghiệp hơn. Hệ thống sẽ tự động lấy ảnh đầu tiên (First Image) trong bài viết để làm ảnh đại diện (Thumbnail).

Các bước thực hiện trên giao diện Blogger mới:

Đăng nhập vào bảng điều khiển Blogger.
Vào mục Chủ đề (Theme) > Click vào dấu mũi tên cạnh nút Tùy chỉnh (Customize) > Chọn Chỉnh sửa HTML (Edit HTML).

📌 Bước 1: Thêm Script vào trước thẻ </head>

Nhấn Ctrl + F tìm từ khóa </head> và dán đoạn mã bên dưới vào ngay phía trên nó:

<script type='text/javascript'>
  var thumbnail_mode = "no-float";
  summary_noimg = 430;
  summary_img = 340;
  img_thumb_height = 120;
  img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(str, limit) {
    if (str.indexOf("<") != -1) {
        var content = str.split("<");
        for (var i = 0; i < content.length; i++) {
            if (content[i].indexOf(">") != -1) {
                content[i] = content[i].substring(content[i].indexOf(">") + 1, content[i].length);
            }
        }
        str = content.join("");
    }
    limit = (limit < str.length - 1) ? limit : str.length - 1;
    while (str.charAt(limit - 1) != ' ' && str.indexOf(' ', limit) != -1) limit++;
    return str.substring(0, limit - 1) + '...';
}
function createSummaryAndThumb(pID) {
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if (img.length >= 1) {
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="' + img[0].src + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';
        summ = summary_img;
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML, summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>

📌 Bước 2: Thay thế thẻ thẻ data:post.body

Nhấn Ctrl + F tìm đoạn mã <data:post.body/> và thay thế toàn bộ bằng khối mã sau:

<b:if cond='data:blog.pageType == "item"'>
  <data:post.body/>
<b:else/>
  <b:if cond='data:blog.pageType == "static_page"'>
    <data:post.body/>
  <b:else/>
    <div expr:id='"summary" + data:post.id'>
      <data:post.body/>
    </div>
    <script type='text/javascript'>
      createSummaryAndThumb("summary<data:post.id/>");
    </script>
    <div style='clear: both;'/>
    <span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'>
      <a expr:href='data:post.url'>Đọc tiếp...</a>
    </span>
  </b:if>
</b:if>