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

Trong tất cả những tiện ích Auto Readmore mình nhận thấy rằng tiện ích này ở blog Noct-land là "chuẩn" nhất, vì thế mình xin được mượn bài viết này để giới thiệu đến anh em đang sử dụng blogspot. Xin chân thành cảm ơn tác giả của blog Noct-land

Làm cách nào để tạo Auto Readmore 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.js ở hỗ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.

DemoKhá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ữ...
Bước 1: Đầ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://trollvlhcv.googlecode.com/svn/trunk/cutter.js'/>
</b:if>

Bước 2: 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>

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.

Bước 3: Lưu lại và kiểm tra kết quả

Nguồn : Noct-land