Hướng dẫn tạo Auto Readmore cho Blogger

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

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/> để 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

<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

.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