Trong bài này Mình sẽ hướng dẫn các bạn tạo Auto Readmore (đọc thêm) cho bài viết tự động hoàn toàn không còn thủ công như trước đây. Với Script mình giới thiệu hỗ trợ ảnh Thumbail lấy hình ảnh đầu tiên xuất hiện trong bài viết để làm ảnh đại diện, do vậy blog của bạn nhìn sẽ chuyên nghiệp hơn.
Ảnh minh họa:
1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML)
4. Tìm đoạn code bên dưới - Tìm (Ctrl +F) thẻ bên dưới Bạn có thể dùng chức năng tìm kiếm nội tuyến ):
<data:post.body/> 5- Và thay nó bằng đoạn mã sau đây:(Lưu ý: Trong mỗi blog có từ 1 đến 3 đoạn <data:post.body/> do vậy bạn phải tìm đúng đoạn cần thiết nha. Nếu dùng mẫu SIMPLE của blogger thì bạn xem phần cập nhật ở cuối bài viết này nha)
<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/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>-->Đọc thêm...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>6- Thêm đoạn mã dưới đây vào sau thẻ <head> (hoặc đặt trước thẻ </head>):<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</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(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>Trong đó bạn thay đổi các thông số cho phù hợp với blog của bạn nha:
- summary_noimg là số ký tự phần miêu tả cho các bài không có hình đại diện.
- summary_img là số ký tự phần miêu tả cho các bài có hình đại diện.
- img_thumb_height chiều cao của hình đại diện (pixel).
- img_thumb_width chiều rộng của hình đại diện (pixel).
7- Bấm Lưu mẫu lại và về trang chủ của blog để xem kết quả nha.
Nếu bạn sợ sử dụng scrip sẽ làm blog bạn chậm thì bạn có thể xem bài viết tạo autoread more không sử dụng JavarscripCập nhật thêm cho các bạn thích ảnh thumbnail và tiêu đề bài biết nằm trên cùng một hàng (Ảnh minh họa)
» Cập nhật.
1- Với mẫu SIMPLE (Mẫu đơn giản) của blogger thì bạn phải thay đoạn code bên dưới thành đoạn code ở bước 4 và bước 5.
<b:if cond='data:blog.metaDescription == ""'>
<!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>- Tiện ích chỉ lấy ảnh trên Picasa, video từ trang Youtube.com. Tự động hiển thị thông báo no thumbnail với bài viết không có hình ảnh và video.
Chúc các bạn thành công.
Comments[ 0 ]
Đăng nhận xét