Hướng dẫn rút gọn bài viết trên trang chủ blogger

Làm thế nào để rút gọn bài viết trên trang chủ với một ảnh thumbnail ngay bên trái và một nút "Read more" (Đọc thêm) ngay bên dưới như mô tả trong hình vẽ sau.

Theo như hình trên ta sẽ thấy tiêu đề bài viết được đặt ngay phía trên, bên trái là ảnh thumbnail đại diện cho bài còn bên phải là một đoạn tóm tắt ngắn gọn phần mở đầu của bài viết. Ngoài ra còn có một nút "Đọc tiếp" ngay bên dưới phần tóm tắt này mà khi click vào sẽ đưa đến bài viết của bạn.
Để làm được điều này ta thực hiện theo các bước sau:
Bước 1: Mở khung soạn thảo html của blogger.
Đăng nhập vào blog của bạn. Tìm đến Template >> Edit HTML

Khung soạn thảo sẽ hiện ra như bên dưới
Bước 2: Hiển thị bài viết dạng rút gọn
Sau khi khung soạn thảo sẽ hiện ra, nhấp vào một vị trí bất kỳ và bấm CTRL + F để tìm đoạn mã sau:

<data:post.body/>

Sẽ có hai đến ba vị trí chứa đoạn mã này. Bạn tìm đến vị trí thứ hai. Và thay đoạn mã trên bằng đoạn mã mới như sau:

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

Bước 3: Xác định kích thước ảnh thumbnail và nội dung tóm tắt bài viết
Làm tương tự như trên. Tìm đến dòng

</head>

Ngay phía trên dòng này, dán vào đoạn code sau:

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</script>
<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>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
</b:if>
</b:if>

Lưu ý: 

• 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 nút Save Template và xem lại thành quả

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait