Auto Readmore là tiện ích giúp thu gọn các bài viết thành 1 đoạn miêu tả ngắn trích từ bài viết đó, có kèm ảnh thumbnail hay không tùy thuộc vào bài viết đó có hình ảnh hay không. Auto Readmore hữu ích trong các trường hợp sau:
- Blog đã được tạo từ lâu, đã có khá nhiều bài viết, nhưng trước kia chưa từng dùng Manual Read more, cho nên bây giờ không thể thu gọn bài viết vì quá sức người.
- Blog có thành viên không thạo lắm với HTML, không biết cách sử dụng Manual Read more
- Blog thường hay copy hay là có khá nhiều bài viết mỗi ngày, không tiện để chèn Manual Read more cho từng bài
Trên đây là Anhvo giới thiệu sơ lược về Auto Readmore để các bạn chưa từng sử dụng nó lần nào có thể hình dung được Auto Readmore là gì.
Với sự thành công của Auto Readmore 3.0, đó là sự sử dụng rộng rãi và góp ý của bloggers chính là nguồn cảm hứng lớn để Anhvo viết tiếp phiên bản mới này. Bản 4.0 có nhiều cải tiến vượt trội hơn các bản khác với các tính năng như:
- Cải tiến phương pháp lấy đoạn summary (đoạn miêu tả), không còn nối dòng lung tung mà sẽ xuống dòng y chang như bài gốc. Summary tối đa lấy theo lượng từ chứ không còn theo kiểu ký tự nữa.
- Cải tiến tốc độ Load cho blog. Bản 4.0 đã loại bỏ hoàn toàn việc Load toàn bộ ảnh trong bài, mà sẽ chỉ Load ảnh đầu tiên của bài đó để làm ảnh Thumbnail.
- Hỗ trợ chế độ Readmore giống Wordpress, đây là tính năng khá thú vị mặc dù nó chỉ là Manual Readmore.
- Hỗ trợ thụt đầu dòng cho Summary. Khi Summary có 2 đoạn trở lên thì việc thụt đầu dòng sẽ làm cho người đọc thấy rõ từng đoạn.
- Có thể chọn lựa phương pháp hiện ảnh thumbnail: dồn trái (float, phù hợp cho các blog tin tức) và Gallery (no-float, phù hợp cho các trang có nhiều hình ảnh quảng cáo, trang Softs).
- Có thể tùy chỉnh kích thước ảnh thumbnail theo ý muốn
- Có thể chọn lựa giữa phương pháp lấy Summary cổ điển và Summary cải tiến.
* Cài đặt:
Việc cài đặt vô cùng đơn giản. Nếu như bạn chưa từng cài đặt Auto Readmore thì làm như bên dưới, còn nếu như bạn đã cài đặt phiên bản cũ thì hãy gỡ bỏ toàn bộ code của nó ra trước khi cài đặt mới. Việc gỡ bỏ code cũ đơn giản nhất là các bạn hãy đọc lại bài hướng dẫn phiên bản cũ và làm ngược từ dưới bài lên.
Đầu tiên bạn vào Dashboard -> Layout - > EditHTML. Bấm vào Download Full Template để Save 1 bản Template trước khi thao tác. Sau đó chọn Expand Widget Templates.
Hình ví dụ
Bạn tìm đến thẻ <data:post.body/> và thay thế <data:post.body/> bằng đoạn code sau:
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>-->đọc tiếp...</a></div>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Hình ví dụ
Kế đến, bạn chèn đoạn code sau vào ngay trên thẻ đóng </head>:
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
var classicMode = false ;
var summary_noimg = 60;
var summary_img = 50;
var img_thumb_height = 150;
var img_thumb_width = 220;
var indent = 3;
</script>
<script src='http://www.freewebs.com/anhvo/blogger/summary-post-v40.js' type='text/javascript'></script>
Trong đoạn code trên sẽ có những chỗ bạn cần thay đổi như sau:
- Giá trị "no-float" của thumbnail_mode là chế độ hiển thị ảnh theo kiểu Gallery, bạn có thể đổi nó thành "float" để cho ảnh của bạn hiện dồn về trái.
- Giá trị false của classicMode ý nói là chế độ hiện Summary cổ điển đang tắt (đã cải tiến), bạn có thể thay nó thành true nếu muốn xài Summary kiểu cũ.
- Giá trị 60 của summary_noimg là số từ tối đa cho Summary khi bài viết không có ảnh nào.
- Giá trị 50 của summary_img là số từ tối đa cho Summary khi bài viết có ảnh.
- img_thumb_height và img_thumb_width là chiều cao và chiều rộng của ảnh Thumbnail. Giá trị thông thường là 100x150 cho float và 300x400 cho no-float.
- Giá trị 3 cho indent, tức là thụt vô đầu dòng 3 ký tự của đoạn Summary. Bạn có thể đặt giá trị của nó là 0,1,2,3,4... đều được.
Sau khi thiết lập xong, bạn bấm Save để lưu thay đổi, vào lại blog và kiểm tra xem Auto Readmore chạy thế nào nhé.
***) Một tính năng độc đáo mà Anhvo đã giới thiệu ở trên, đó là hiện Readmore giống Wordpress. Cái readmore này có cái lợi là bạn có thể định vị chỗ ngắt Summary, tuy nhiên thêm code rất đơn giản, chỉ cần thêm dòng
<!-- more -->
vào chỗ mà bạn cần ngắt cho Summary, như thế tất cả các định dạng HTML của bạn trong Summary sẽ không thay đổi so với bài gốc. Nhưng hạn chế là bạn phải chèn dòng <!-- more --> bằng tay, điều này không khác gì mấy so với chèn SPAN CLASS="FULLPOST" như trước kia, có điều nó nhanh chóng hơn.
Chế độ Readmore giống Wordpress này đã được tính hợp vào trong bản 4.0, bạn không cần phải config gì để chạy chế độ này, khi nào bài viết có đoạn code ngắn <!-- more -->, Auto Readmore sẽ tự động chuyển sang chế độ giống Wordpress.
Tính năng này Anhvo cập nhật từ bài làm Readmore giống Wordpress của bạn Tuấn Anh, và đã tích hợp nó vô bản 4.0 này. Nhiều tính năng mới ở 4.0 cũng được hoàn thành từ những gợi ý trong bài phân tích Auto Readmore của Tuấn Anh. Xin cám ơn Tuấn Anh đã đăng bài hướng dẫn thật hữu ích.
(Theo vwg)
Đang tải xin vui lòng chờ...
0 comments:
Post a Comment
[▼/▲] Chèn biểu tượng vui