Laman

Pages

Laman

Oct 14, 2010

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 != &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;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>--&gt;Đọc thêm...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><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).

No comments:

Post a Comment

Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D