Cách thu gọn bài viết hiển thị trang chủ trên blogger/blogspot hiệu quả

Với mẫu sẵn của blogger, ta có thể thấy bài viết trong trang chủ hiện thị ở dạng đầy đủ nên rất dài. 

Để thu gọn được bài viết cách hiệu quả và đơn giản nhất ta bắt đầu theo từng bước sau:

Bước 1: Vào mục Mẫu trong phần quản trị blogger, sau đó chọn Chỉnh sửa HTML.
Bước 2: Ấn tổ hợp Ctrl + F để tìm </head>
Bước 3: Thêm vào phía dưới đoạn code sau:

<br /> <script type='text/javascript'> posts_no_thumb_sum = 490; posts_thumb_sum = 400; img_thumb_height = 160; img_thumb_width = 180; </script><br /> <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 createSummaryAndThumb(pID, pURL, pTITLE){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = posts_no_thumb_sum; if(img.length>=1) { imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>'; summ = posts_thumb_sum; } var summary = imgtag + '<div> ' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script><br /> <b:if cond='data:blog.pageType != "static_page"'><br /> <b:if cond='data:blog.pageType != "item"'><br /> <style type='text/css'> .post-footer {display: none;} .post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;text-align:justify} .readmore a {text-decoration: none; } </style><br /> </b:if><br /> </b:if><br /> <br />

Note: 
Bạn có thể thay đổi số lượng ký tự hiển thị trên trang chủ bằng cách thay đổi giá trị 490 (khi không có ảnh thumbnail) và 400 (khi có ảnh)
Để thay đổi kích thước ảnh: ta chỉ cần đổi giá trị 160 (cao) và 180 (rộng).

Bước 4: Ấn tổ hợp Ctrl + F để tìm <data:post.body/> 
Bước 5: Sẽ có nhiều kết quả nhưng ta sẽ thay thế đoạn code <data:post.body/> tìm được thứ 2 thành code phía dưới:

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

Bước 6: Lưu mẫu để xem kết quả,