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.


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://lh4.googleusercontent.com/-G9M2DTCTUwM/Tlh-2pwtc5I/AAAAAAAABKM/kCJg-Kf3W2M/no_image_yet.jpg) 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
Add a Comment

25 comments

Tuyệt vời... cái này hơn hẳn autoreadmore không dùng js ở chỗ số ký tự được nâng lên đáng kể. Đang nghiên cứu làm sao ứng dụng nó tốt nhất...

4/13/2012 comment-delete

Nhìn thì thích nhưng không dám táy máy nữa vì trong theme Newscast của Noct đã có thủ thuật Autoreadmore rồi. Không biết nên thêm bớt thế nào :-ss

4/13/2012 comment-delete

Noct mãi chả xem cho mình cái comment phân cấp :(

NAD
4/13/2012 comment-delete

@NADMình cũng dùng Temp New Cast, ý bạn là comment phân cấp cho nó à, áp dụng thủ thuật bên vnblogspot ý

có 3 cái biết chọn cái nào hả bạn :)

4/14/2012 comment-delete

@Tùng Bithì cứ thay từng cái, được cái nào hay cái đó :D

4/14/2012 comment-delete

Noct chuyển sang meme emo rồi à, có hình yao ming kìa =))

4/15/2012 comment-delete

Sao Noct không làm giống Bác Tiến để có thumbnail đẹp cho ảnh ở host khác ngoài Picasa. http://www.vnblogspot.com/2012/02/hack-overflow-hidden-css-trong-ie.html

@Phương Nguyễnyeah, thanks bạn đã góp ý, sẽ cập nhật :*

4/15/2012 comment-delete

bác Noct ơi , exchange hok nhỉ :) :) link em đây http://goo.gl/hn9rW

4/17/2012 comment-delete

Mowid anh noct sang nhà em chơi.em cũng đang học thiết kế blogspot. :))

bác hướng dẫn em chỉnh đoạn trích dẫn nó margin center với lại nó ngắt dòng như trong bản gốc được không này nó khi 1 hàng k xuống dòng được link blog em đây : dongxiat.blogpost.com . Em muốn giống như này nè bác http://baltagy.blogspot.com , thx

4/19/2012 comment-delete

@dongxi@trước chữ readmore bạn chèn <br/> là được

4/19/2012 comment-delete

Hình như dạng này nó bị lỗi là câu văn nó cứ viết liền nhau, 2 đoạn đáng lẽ ngắt ra thì nó lại nằm cùng 1 hàng. Giờ em muốn nó giữ nguyên form của bài viết thì làm sao ạ?
Ah em muốn không dùng ảnh thumnail thì chỉnh sao hả anh?

4/24/2012 comment-delete

Có cách nào để gắn link bài viết cho tấm hình không Noct ui. Nghĩa là khi click chuột vào tấm hình nó ra bài viết đó ấy :)):)):))

có b-)
nhưng có vẻ ít ai quan tâm thủ thuật này nên lười cập nhật b-)

6/08/2012 comment-delete

Cập nhật đê pác, em đang dùng mừ. Năn nỉ đoá :D:D:D

Giúp em đê pác, chờ hoài à

Bác quyết tâm im lặng à, em hỏi hoài lun đoá

mình làm đi làm lại như hướng dẫn bị lỗi ko hiển thị thumb mặc định khi bài đăng không chứa ảnh. xem giúp mình với http://www.khocviem.org/search/label/C%C3%A1ch%20nh%C3%ACn%20cu%E1%BB%99c%20s%E1%BB%91ng

11/03/2012 comment-delete

Mình làm thấy nó không giống trong demo lắm. Bạn cho mih hỏi đoạn code nào cho mình sửa vị trí của "read more" vậy bạn??? Mình muốn "read more" nó luôn nằm ở vị trí góc phải của bài viết. Bạn giúp mình nhé.

11/21/2012 comment-delete

Bạn ơi mình không thể tìm được cái ở trong css của mình, bạn có thể giúp mình được không, vì cái chữ đọc thêm của mình nó xấu quá, blog của mình là www.incongnghiep.blogspot.com
Bạn tư vấn giúp mình với nhé

12/05/2012 comment-delete

Mình đã làm được auto read more nhưng chỉ có 5 bài trên trang HOME, muốn nó xuấ hiện 10 bài thì làm sao, xin hướng dẫn giúp nhé.

1/16/2013 comment-delete

Bài này có liên quan gì tới việc hiển thị số bài đăng ngoài Home đâu bạn,bạn phải vào bố cục>Bài đăng trên Blog, đổi 5 thành 10 là xong.

Đăng nhận xét

- Không chèn liên kết quảng cáo khi đăng nhận xét.
- Nội dung nên liên quan tới chủ đề của bài.
- Use English if you do not understand what we are talking about.

Chèn Emoticons
Top
Copyright © 2011 Noct Blog. Content is licensed under a Creative Commons Attribution-NonCommercial 3.0 License