Bước 1: Mở khung soạn thảo HTML của blogger.
Đăng nhập vào blog của bạn. Vào phần Design >> Tìm đến Template
>> Edit HTML
Bước 2: Vào HTML đánh Ctrl + F Tìm thẻ ]]></b:skin>
Chèn đoạn mã dưới đây vào trước (phía trên) ]]></b:skin>
.readmore
{
float:right;
margin:5px
20px 5px 0px;
padding:3px;}
.readmore
a{
color:#fff;
padding:3px
5px 3px 5px;
background:#fc8b33;
}
.readmore
a:hover{
color:#fff;
background:#000ff;}
Bước 3: Hiển thị bài viết dạng
rút gọn
Tiếp tục như trên ở HTML bấm Ctrl + F
để tìm đoạn mã sau:
<data:post.body/>
Sẽ có hai đến ba vị trí chứa đoạn mã này.
Bạn tìm đến vị trí thứ hai. Và thay đoạn mã trên bằng đoạn mã mới
như sau:
<b:if
cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" +
data:post.id'><data:post.body/></div>
<script
type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</script>
<span class='readmore'
style='font-weight:bold;padding:5px;float:right;'><a
expr:href='data:post.url'>Đọc tiếp »</a></span>
</b:if>
</b:if>
<b:if cond='data:blog.pageType ==
"item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType ==
"static_page"'><data:post.body/></b:if>
Bước 4: Xác định kích thước ảnh thumbnail và nội dung tóm tắt bài viết
Làm tương tự như trên. Ctrl + F Tìm đến dòng: </head>
Ngay phía trên dòng này, dán vào đoạn code
sau:
<script
type='text/javascript'>
posts_no_thumb_sum = 400;
posts_thumb_sum = 310;
img_thumb_height = 140;
img_thumb_width = 170;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left;
margin-right: 10px;"><a href="'+ pURL +'" title="'+
pTITLE+'"><img src="'+img[0].src+'"
width="'+img_thumb_width+'px"
height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) +
'</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom:
20px;text-align:justify}
.readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>
Lưu ý:
- Bạn có thể thay đổi số lượng ký tự hiển
thị trên trang chủ bằng cách thay đổi giá trị 400 (khi
không có ảnh thumbnail) và 310 (khi
có ảnh)
- Để thay đổi kích thước ảnh: ta chỉ cần đổi
giá trị 140 (cao) và 170 (rộng).
- Quan trọng: Bạn lưu lại Theme blog của bạn trước khi chỉnh sửa HTML, Trường hợp làm đầy đủ mà kết quả vẫn không thấy gì. Bạn Recover lại theme và thực hiện lại hai bước sau, bỏ bước 2. Vì có một số Theme mẫu không cần bước 2.
Bước 5. Save và mở lại trang Blogger
để xem kết quả
Giang Hương Trà
