Hướng dẫn rút gọn bài
viết trên trang blogger
Làm thế nào để rút gọn bài viết trên trang chủ Blog với một ảnh thumbnail ngay bên trái và một nút "Read more" (Đọc tiếp) ngay bên dưới nội dung rút gọn như mô tả trong hình blog dưới đây.
Tôi đã tìm đọc nhiều
bài viết nói về cách rút gọn bài viết trên trang Blog, rồi thực hành theo nhưng
lại không được.Vì vậy tôi tìm kiếm tổng hợp lại nhiều
nguồn khác nhau, thử nhiều lần và tìm được giải
pháp tốt nhất sau khi đã làm được trên blog của mình, xin được chia sẻ sau đây:
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à
Không có nhận xét nào:
Đăng nhận xét