Auto Readmore chắc chắn vô cùng quen thuộc với các bạn đã từng thiết kế, chỉnh sửa template blogger. Đây là tiện ích dùng để thu gọn nội dung bài viết khi hiển thị trên trang chủ. Cụ thể, khi áp dụng thủ thuật này, trên trang chủ, Blogger chỉ hiển thị tiêu đề bài viết, trích dẫn nội dung, hình ảnh thu nhỏ ( thumbnail ), và có thể thêm đường dẫn đọc thêm
Trong bài viết này, mình sẽ hướng dẫn các bạn tạo Auto Readmore cho Blogger sử dụng Javascript và không sử dụng Javascript. Auto Readmore sử dụng Javascript có lợi thế là khả năng tăng/giảm số kí tự được trích dẫn nhưng lại góp phần làm giảm tốc độ Blog. Ngược lại, Auto Readmore không sử dụng Javascript lại không thể tăng giảm số kí tự trích dẫn nhưng đảm bảo không giảm tốc độ Blogger
Phương pháp này sử dụng data:post.firstImageUrl để lấy link ảnh đầu tiên của bài viết làm link ảnh thumbnail, và sử dụng <data:post.snippet/> để lấy trích dẫn nội dung bài viết
Do Blogger chỉ lấy 140 kí tự đầu tiên để làm trích dẫn nên các bạn bố trí viết nội dung sao cho khi trích dẫn có ý nghĩa, thu hút người đọc nhé.
Bước 1 : Đăng nhập vào Blogger => Mẫu ( Template ) => Chỉnh sửa
Bước 2 : Tìm kiếm <data:post.body/> trong template. Lưu ý : nếu template của các bạn chưa chỉnh sửa phần widget bài viết thì bạn sẽ tìm thấy hai đoạn code như trên.
Thay thế đoạn <data:post.body/> thứ hai bằng đoạn code sau
Trong bài viết này, mình sẽ hướng dẫn các bạn tạo Auto Readmore cho Blogger sử dụng Javascript và không sử dụng Javascript. Auto Readmore sử dụng Javascript có lợi thế là khả năng tăng/giảm số kí tự được trích dẫn nhưng lại góp phần làm giảm tốc độ Blog. Ngược lại, Auto Readmore không sử dụng Javascript lại không thể tăng giảm số kí tự trích dẫn nhưng đảm bảo không giảm tốc độ Blogger
Xem thêm : Hướng dẫn tăng tốc Blogger toàn tập
Auto Readmore cho Blogger không sử dụng Javascript
Phương pháp này sử dụng data:post.firstImageUrl để lấy link ảnh đầu tiên của bài viết làm link ảnh thumbnail, và sử dụng <data:post.snippet/>
Do Blogger chỉ lấy 140 kí tự đầu tiên để làm trích dẫn nên các bạn bố trí viết nội dung sao cho khi trích dẫn có ý nghĩa, thu hút người đọc nhé.
Bước 1 : Đăng nhập vào Blogger => Mẫu ( Template ) => Chỉnh sửa
Bước 2 : Tìm kiếm <data:post.body/> trong template. Lưu ý : nếu template của các bạn chưa chỉnh sửa phần widget bài viết thì bạn sẽ tìm thấy hai đoạn code như trên.
Thay thế đoạn <data:post.body/> thứ hai bằng đoạn code sau
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img class='post-thumbnails' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
</a>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
Bước 3 : Thêm đoạn code dưới đây vào bên trên thẻ ]]></b:skin>
Nếu bạn thích ảnh thumbnail ở bên trái thì dùng đoạn code này
Nếu bạn thích ảnh thumbnail ở bên phải thì dùng đoạn code này
Các bạn thay đổi lại chiều rộng ảnh (width ) chiều cao ảnh (height) cho phù hợp
Bước 4 : Save template
Phương pháp này sử dụng javascript để lấy trích dẫn nên bạn hoàn toàn có thể thay thế số lượng kí tự trích dẫn muốn hiển thị
Bước 1 : Đăng nhập vào Blogger => Mẫu ( Template ) => Chỉnh sửa
Bước 2 : Tìm kiếm và chèn phía trên </head> đoạn code sau
trong đó
Nếu bạn thích ảnh thumbnail ở bên trái thì dùng đoạn code này
.post-thumbnails{float:left;margin-right:25px;width:150px;height:150px;}
Nếu bạn thích ảnh thumbnail ở bên phải thì dùng đoạn code này
.post-thumbnails{float:right;margin-left:25px;width:150px;height:150px;}
Các bạn thay đổi lại chiều rộng ảnh (width ) chiều cao ảnh (height) cho phù hợp
Bước 4 : Save template
Auto readmore cho Blogger sử dụng Javascript
Phương pháp này sử dụng javascript để lấy trích dẫn nên bạn hoàn toàn có thể thay thế số lượng kí tự trích dẫn muốn hiển thị
Bước 1 : Đăng nhập vào Blogger => Mẫu ( Template ) => Chỉnh sửa
Bước 2 : Tìm kiếm và chèn phía trên </head> đoạn code sau
<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
post_thumb_height = 160;
post_thumb_width = 180;
</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="'+post_thumb_width+'px" height="'+post_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;}
.readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>
trong đó
- posts_no_thumb_sum : Số lượng kí tự của trích dẫn khi không có thumbnail
- posts_thumb_sum : Số lượng kí tự của trích dẫn khi có thumbnail
- post_thumb_height : Chiều cao thumbnail
- post_thumb_width : Chiều rộng thumbnail
các bạn chỉnh sửa lại cho đúng mục đích.
Bước 3 : Tìm kiếm và thay thế <data:post.body/> ( đoạn code thứ hai, tượng tự như ở phần trên ) bằng đoạn code 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='float:right;'><a expr:href='data:post.url'>Đọc thêm »</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 : Save template lại
Lời kết : Trên đây là cách tạo Auto Readmore cho Blogger cơ bản nhất. Đây là một thủ thuật khá phổ biến và khá hay, các bạn hoàn toàn có thể tùy biến cho phù hợp. Trong bài viết tới, mình sẽ áp dụng thủ thuật này và một ít CSS để hướng dẫn các bạn cách hiển thị bài viết trên trang chủ theo dạng lưới ( Grid ). Hẹn gặp lại
