Tạo Read More tự động với hình đại diện trên Blogger

Tạo liên kết Read More (đọc thêm) cho bài viết trên Blogger một cách tự động mà không cần thao tác thủ công dùng các thẻ span (class=fullpost) để ngăn phần miêu tả và phần đăng bài đầy đủ như cách cũ, ngoài ra còn hỗ trợ hình đại diện (thumbnail) khá chuyên nghiệp, lấy hình đầu tiên trong bài viết làm hình đại diện.

Hướng dẫn cài đặt:

Bước 1: Vào Bố cục (Layout) – Chỉnh sửa HTML (Edit HTML), chọn Expand widget, tìm đến thẻ <data:post.body/> và thay nó bằng đoạn mã sau đây:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>-->Đọc thêm...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Bước 2: Thêm đoạn mã dưới đây vào phần HEAD (giữa 2 thẻ <head> ... </head>) của template:

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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){
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>

Lưu ý các thông số màu đỏ trong đoạn mã phía trên:
summary_noimg là số ký tự phần miêu tả cho các bài không có hình đại diện.

summary_img là số ký tự phần miêu tả cho các bài có hình đại diện.

img_thumb_height chiều cao của hình đại diện (pixel).

img_thumb_width chiều rộng của hình đại diện (pixel).

Thủ thuật tổng hợp

Thủ thuật Blogger

Thủ thuật Internet

Thủ thuật máy tính