Tùy biến Read More tự động với hình đại diện

Chúng ta đã biết đến cách tạo Read More tự động với hình đại diện (Auto Readmore with Thumbnails) khá phổ biến trong cộng đồng Blogger vì nó là một trong những thủ thuật cần thiết nhất.

Hôm nay tôi xin giới thiệu một cách mà tôi đã xào nấu chế biến từ thủ thuật và có những tùy biến như tạo trường hợp ảnh đại diện float và không float, nếu ảnh đại diện được float thì có thể sang trái hoặc sang phải và nếu không được float thì được căn nằm giữa phần tóm tắt bài viết.

Xem Demo.

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 Huynh Nhat Ha-->
<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;.