Monday, April 11, 2011

Tạo liên kết Read More đọc thêm Icon tự động cho blogger

          Tạo liên kết Read More (đọc thêm thay bằng Icon ) 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. Và không ảnh hưởng tới trang tĩnh (New Page/ static page).
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:

<!-- Chèn đọc thêm... by www.vinh.co.cc -->

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>
<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;padding-top:20px;'><a expr:href='data:post.url'><img src='http://3.bp.blogspot.com/-CzQGlVeGTZA/TaAd7u1boLI/AAAAAAAAAT4/KL6acP5WhIs/s1600/xemtiep1.gif'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>
</b:if>
<div style='clear: both;'/>

<!-- Chèn đọc thêm... by www.vinh.co.cc -->
Lưu ý: Ở đây mình dùng Icon thay cho từ Đọc thêm... Nếu bạn không trích thì thay đoạn mã màu đỏ  thành từ Đọc thêm...
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:
<!-- Chèn đọc thêm... by www.vinh.co.cc -->

<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>

<!-- Chèn đọc thêm... by www.vinh.co.cc -->
Chú ý: 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).

     
     Chúc các bạn thành công! 
          (Nếu gặp vấn đề khi thực hiện thì hãy để Comment dưới đây nhé! Hay đơn giản là Comment để động viên mình cũng được vì đây là thủ thuật blog đầu tiên do mình tự viết mà! Hinhi!... Hi vong sau này sẽ có nhiều thủ thuật hay hơn cho các bạn.)

No comments:

Post a Comment

Girls Generation - Korean