Tạo Auto Readmore cho Blogger với Cutter.js

/
Cách đây mấy tháng thì tôi có đọc bài giới thiệu về thư viện Cutter.jshỗn tạp blog, nhận thấy nó khá là thú vị. Thế là vào một ngày Chủ nhật rãnh rỗi mới thử áp dụng Cutter.js trên Blogger, kết quả thu được là một thủ thuật tạo readmore tự động mới, bèn đăng lên đây để mọi người tham khảo.


Khác với các thủ thuật auto readmore từ trước đến nay, Cutter.js giúp ta giữ lại được các thẻ HTML như in đậm, in nghiêng, màu chữ...

Đầu tiên, bạn vào phần chỉnh sửa HTML của template, chọn mở rộng mẫu rồi chèn đoạn sau phía trên </head> :
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<style type='text/css'>
.post-body img { display:block; float:left; margin-right: 10px; width:100px; height:100px }
</style>
<script src='http://noctsvn.googlecode.com/svn/trunk/cutter.js'/>
</b:if>

Tiếp tục tìm đến đoạn <data:post.body/> và thay thế nó bằng đoạn sau:
<div class='post-body'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<span expr:id='data:post.id'><data:post.body/></span>
<script type='text/javascript'>
var snippet = document.getElementById(&quot;<data:post.id/>&quot;);
Cutter.run(snippet, snippet, 40);
</script>
<b:else/><data:post.body/></b:if>
<div class='clear'/>
<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>

Lưu lại và kiểm tra kết quả, bạn có thể thay đổi các giá trị như số kí tự (40) hoặc kích thước ảnh đại diện (100x100). Theo cơ chế hoạt động của Cutter.js thì nó sẽ cắt 40 kí tự đầu tiên trong bài đăng để hiển thị ra trang chủ và dĩ nhiên là giữ nguyên định dạng HTML. Cũng vì vậy nên nếu không có ảnh nào được chèn giữa 40 kí tự này thì sẽ không có ảnh thumbnail, bạn cần lưu ý điều này và nên đặt một tấm ảnh lên trên cùng của bài đăng để làm ảnh đại diện ở trang chủ.

Tệp Cutter.js trong bài này đã được lược bỏ một số thứ không cần thiết cho gọn bớt (4kb), bạn có thể upload sang host khác hoặc chèn thẳng vào template.
Add a Comment

44 comments

Lâu lắm mới thấy bài mới :D. Test cho tag HTML nằm quanh ký tự thứ 40 chưa bác.

6/11/2012 comment-delete

Vừa thử bôi đậm chữ cuối thì nó biến mất ở trang chủ @-)
Có lẽ cái này vẫn còn lỗi.

6/11/2012 comment-delete

nuột nà phết, thumb to rõ ràng

6/11/2012 comment-delete

hí hí...em đợi bác noct hoàn thiện chôm về dùng cái coi:)

6/11/2012 comment-delete

Hay ghê ak'
Mình mới vừa đọc lại cái bài của bác Hỗn tạp về cái này cái qua bác thấy ngay bài này!!hihi

6/11/2012 comment-delete

Bài này cực kỳ cần thiết cho các bác nào đi sâu vào lĩnh vực thiết kế temp..

Mỗi bài mới của Noct là giới BLogger có bước tiến mới. Good job.

6/11/2012 comment-delete

Anh em Blogger dạo này lười post bài mới quá, hay tại trời nóng :(

NAD
6/12/2012 comment-delete

Có xuống dòng được không bác Noct, ngại test quá :D

có được [-(

6/13/2012 comment-delete

Nhận xét này đã bị quản trị viên blog xóa.

6/14/2012 comment-delete

cám ơn đóng góp của bạn nhưng ở đây đang bàn về cutter.js

lần sau bạn vui lòng nêu ý kiến ở đây nhé.

6/14/2012 comment-delete

có thể read more thủ công cho bài mới nhất và các bài sau read more giữu HTML ?

6/19/2012 comment-delete

được nhưng như thế lại thành ra một thủ thuật mới mất rồi

6/19/2012 comment-delete

Thường thì Read More thủ công vẫn giữ được các tag HTML như: in đậm, in nghiêng, màu chữ mà...

Q.B
6/19/2012 comment-delete

Đây là auto thưa bợn.

6/20/2012 comment-delete

không tìm thấy thì sao bác, có cách nào khác ko

6/20/2012 comment-delete

không tìm thấy đoạn đó thì chắc hẳn bạn đang dùng Wordpress

6/21/2012 comment-delete

đâu cần phải thế chớ bác :D

Ik
7/12/2012 comment-delete

úi, bỏ cái nền avatar cm bác ui, nhìn cái avatar em kìa.. :-o

Ik
7/12/2012 comment-delete

Tôi không tìm thấy đoạn để thay thế thì làm thế nào, Làm ơn chỉ giúp!

hi Noct ! mình muốn hỏi muốn giảm kích thước chiều cao của nó thì chỉnh chổ nài trong code....thanks

8/31/2012 comment-delete

update chiều cao của nút read more

8/31/2012 comment-delete

good :D

9/15/2012 comment-delete

thank you very much indeed ;)

Hãy ghé thăm Missnudevn chấm bờ lốc sờ pót chấm Com nhé

9/25/2012 comment-delete

bài cũ quá rùi nhỉ

10/02/2012 comment-delete

anh noct ơi anh cóa yh or facebook hk cho em xin nik anh gửi we yh:nh0ckteenst or facebook:nh0ckface007@gmail.com em có thắc mắc về Sữa chữa dessign mog anh giúp đở tks

10/03/2012 comment-delete

mời bác sang nhà mới em đọc thơ nha

Có cách nào cắt giảm số ảnh trong bài khoongg?

10/25/2012 comment-delete

http://lamnote.blogspot.com/

Anh ơi, cái này sao em làm không ra :"<

10/27/2012 comment-delete

Đoạn trích ít quá

Bài viết rất hay nhưng thường thì mọi người nên dùng một template sau đó edit sẽ nhanh hơn.

11/24/2012 comment-delete

please. english language

11/24/2012 comment-delete

Pls Vietnamese language! :D

11/25/2012 comment-delete

Nock có thể hướng dẫn để tạo phần dười cùng của blog giống của Nock được không ( phần Blogger Buzz. Nhãn. Bạn Bè ở cuối trang blog đó )
http://ns8.upanh.com/b2.s35.d3/5f0ff04f5fdb2e9aa8dcdb9ebd684662_51238258.cuoitrang.jpg

11/27/2012 comment-delete

b-) Sao Noct dạo này ít ra bài mới quá vậy...

12/06/2012 comment-delete

Làm sao để download cái js về host của mình vậy bạn? Cảm ơn nhiều.

12/14/2012 comment-delete

Theo mình thấy đối với cutter.js khó tùy biến hơn code auto readmore trước đây. Đối với script trước nếu tùy biến lại có thể hiển thị bài viết sẽ trông đẹp hơn, và có thể thêm một số biến liên quan tới bài viết để hiển thị ra khi ở dạng readmore.

Cám ơn Noct đã giới thiệu một phương pháp thực hiện có kết quả. Nhưng sau khi thực hiện, mỗi lần mở chế độ này máy chạy rất chậm. Không biết có phải lỗi do tôi thực hiện chưa đúng hay tại tất yếu máy sẽ chạy chậm lại nứa.

1/12/2013 comment-delete

bác này lâu ra bài mới thế

Trên blog mình mặc định không có thì làm sao.
Blog tranh pastel.
Thanks. Chỉ giáo giúp khi nào mua tranh pastel thì liên hệ bán rẻ cho

1/16/2013 comment-delete

Noct ơi, trong 40 ký tự đầu của read more mà có 2 hình thì nó hiện cả 2 hình liền. Có cách nào chỉ hiện hình thứ nhất thôi không?
Cám ơn ^^

1/17/2013 comment-delete

http://www.vncode.biz sao tớ làm không được vậy

1/20/2013 comment-delete

Đă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