Auto-Readmore Evolution

Cái script này thì quá nổi tiếng rồi, ít nhất chúng ta đã dùng qua nó 1 lần. Hầu hết các blog thủ thuật đều ít nhiều đề cập tới Auto-readmore, vậy nên mặc dù chưa hề đăng và không hề dùng auto-readmore nhưng nó vẫn nằm trong top keyword của Noct Blog.

Do đó để vớt vát traffic thì hôm nay mình sẽ đăng cái script auto-readmore đang dùng cho mấy template gần đây, hy vọng bạn sẽ có thêm 1 lựa chọn mới khi sử dụng thủ thuật phổ biến này.

Vậy có gì mới ? Câu trả lời là không có gì sáng tạo ở đây cả, chỉ là chế biến lại cái script cũ để cải thiện tốc độ tải và dễ tùy biến hơn.

Demo

Như bạn đã thấy trong demo thì ảnh thumbnail đã được lấy một cách đẹp và nhanh hơn thay vì resize lại:

  ----->  

Tuy vậy đối với ảnh không phải từ Picasa mà copy từ site khác thì vẫn được resize lại nhưng không được đẹp cho lắm :

  ----->  

Trước khi thực hiện thủ thuật này thì bạn nên sao lưu lại template gốc để đề phòng, sau đó vào phần chỉnh sửa HTML rồi chèn đoạn CSS sau phía trên ]]></b:skin>
.thumb,.no-thumb{float:left;margin-right:15px;width:164px;height:164px;overflow:hidden;position:related}
.no-thumb{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih-bNVffbitoN3LZbnFq7pZYmtQgQn75RKbQQrxtbq8SUQWI8Wr7WwYgXpS5nuUAnvhsVhevVmYLqoNAWsT5b5mPbyyDXAcI_j_UWNV6h7mOujczGHd3ndtvvsO8ioTedaTcxXu8kNzAM/) 0 0 no-repeat;}
a.jump-link{font-weight:bold}
Còn đoạn script này thì chèn bên dưới ]]></b:skin>
<script type='text/javascript'>//<![CDATA[
var snippet=60; G="s164-p";
function H(b,a){return b.replace(/<.*?>/gi,"").split(/\s+/).slice(0,a-1).join(" ")} function rm(b){var b=document.getElementById(b),a="",a=b.getElementsByTagName("img");if(1<=a.length){C=a[0].src;B=C.split("/");D=B[2];if(-1!=D.indexOf("blogspot")||-1!=D.indexOf("googleusercontent")||-1!=D.indexOf("ggpht"))F=B[7],C=-1==F.indexOf(".")?C.replace(F,G):B[0]+"//"+B[2]+"/"+B[3]+"/"+B[4]+"/"+B[5]+"/"+B[6]+"/"+G+"/"+B[7];a='<div class="thumb"><img src="'+C+'" /></div>'}else a='<div class="no-thumb"></div>';b.innerHTML=a+H(b.innerHTML,snippet)+"..."};
//]]></script>
Màu đỏ là kích thước của ảnh thumb, bạn có thể sửa lại nhưng nên để chúng có giá trị bằng nhau.
Màu xanh là url ảnh thumb mặc định khi bài đăng không chứa ảnh nào.
60 là số kí tự đoạn trích dẫn, có thể sửa lại.

Cuối cùng, chọn mở rộng tiện ích tìm đến <data:post.body/> sửa nó thành:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<span expr:id='&quot;p&quot; + data:post.id'><data:post.body/></span>
<script type='text/javascript'>rm(&quot;p<data:post.id/>&quot;)</script><b:else/><data:post.body/></b:if>
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Read More</a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Read More</a>
</b:if>
</b:if>
<div class='clear'/>
Save template lại, vậy là gần như xong, nếu trong template của bạn có đoạn dưới đây thì xóa nó đi:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
Code này hoàn toàn tương thích với read-more mặc định của Blogger, và nếu bạn siêng chèn thẻ more cho bài đăng thì tốc độ của nó có thể gần ngang thủ thuật auto-readmore không dùng javascript, và đoạn trích dẫn thì chắc chắn là dài hơn. Về SEO thì có thể yên tâm là toàn bộ HTML của bài đăng vẫn hiển thị trong source của blog nên không ảnh hưởng.
Một lần nữa cám ơn bác Duy Pham đã góp gió

Cập nhật 15/4/2012: thay đổi cách lấy thumb đẹp hơn đối với ảnh ngoài Picasa