Tạo đọc thêm tự động có hổ trợ ảnh thumbnail cho blogger

Tính năng đọc thêm trên blogger có sẵng, nhưng chúng ta phải thực hiện bằng tay trên mỗi bài viết và hình ảnh phải đưa lên góc trái của mỗi bài viết. Cố định hiển thị tại đó luôn ngay cả khi ta mở xem toàn bài viết. Cũng tùy quan điểm và cách bố trí thể hiện mỗi người, nếu muốn tự động thì làm theo các bước sau đây:

1. Đăng nhập vào tài khoản blogger của bạn
2. Vào bảng điều khiển -> Thiết kế -> chỉnh sửa HTML
3. Sao lưu mẫu hiện tại của bạn
4. Click vào ô mở rộng mẫu Tiện ích bên góc phải
5. Trong cửa sổ mã, nhấn Ctrl +F, tìm từ khóa </head>
6. Thêm đoạn mã dưới đây vào ngay trên dòng này

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</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(thumbnail_mode == "yes") {
 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>
<!-- Auto read more script End -->

7. Sau đó, tìm dòng có từ <data:post.body/>
8. Thay thế dòng này bằng đoạn mã dưới đây

<!-- http://www.mialui.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<a class='more' expr:href='data:post.url'> đọc tiếp ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

9. Click xem trước, nếu chạy được thì hãy lưu mẫu nhé

Chú ý: Một vài điều bạn có thể thay đổi để phù hợp với giao diện của bạn:

1. thumbnail_mode: chọn “yes” nếu bạn muốn hiển thị ảnh đại diện hoặc chọn “no” nếu bạn không muốn.
2. summary_img: Số kí tự kể cả khoảng trống mà bạn muốn hiển thị với bài viết có ảnh đại diện.
3. summary_noimg: Số kí tự kể cả khoảng trống mà bạn muốn hiển thị với bài viết không có ảnh đại diện.
4. img_thumb_height và img_thumb_width: Chiều cao và chiều rộng của ảnh đại diện (đơn vị: pixels).
5. Bạn có thể thay đổi từ đọc thêm ... bằng bất kỳ từ gì nếu bạn muốn.

Bài viết đã được thực hiện ngay trên mialui.com.

Chân thành cảm ơn Blogger Sentral