Tạo readmore một cách đơn giản có ảnh thumbnail đại diện

Sau đây là hướng dẫn cách cài đặt cho trường hợp ảnh đại diện float sang phải.

Bước 1. Đăng nhập Blogger vào Design >> Edit HTML chọn Expand Widget Templates.

Đặt đoạn code dưới đây vào trước thẻ </head>.

<!--Auto Readmore customized by Onlinetorich-->
<style type='text/css'>
.readmore {float:left}
.post-thumbnail {
float:right;
margin:0px 0 10px 10px;
}
.center-image {
display:block;
text-align:center;
margin:0px auto;
}
</style>
<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) {
if(thumbnail_float) {
imgtag = '<img src="'+img[0].src+'" class="post-thumbnail" width="'+img_thumb_width+'" height="'+img_thumb_height+'" alt=""/>';
summ = summary_img;
}
else {
imgtag = '<img class="center-image" style="width:'+img_thumb_width+'px; height:'+img_thumb_height+'px;" src="'+img[0].src+'" alt=""/></div>';
summ = summary_img;
}
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

var thumbnail_float = true;
summary_noimg = 350;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
//]]>
</script>

Bước 2. Tìm dòng <data:post.body/> hoặc dòng <p><data:post.body/></p> và thay nó bằng đoạn code 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>
<a class='readmore' expr:href='data:post.url'>Đọc thêm &#187;</a>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>

Lưu Template là OK.

Tùy biến: Nếu muốn ảnh đại diện float sang trái thì ở Bước 1 tại phần code CSS chỉnh lại như sau:

.readmore {float:right}
.post-thumbnail {
float:left;
margin:0px 10px 10px 0;
}

Nếu không cho ảnh đại diện float mà được căn giữa phần tóm tắt bài viết thì ở Bước 2 tại phần cuối đoạn code Javascript, thay dòng var thumbnail_float = true; thành var thumbnail_float = false;. 

Chúc các bạn thành công.

Nguồn http://www.blogtopsites.com