Với blog trước với mẫu Langit tôi đã áp dụng các phương thức sưu tầm để tạo "Readmore -Đọc tiếp" nhưng phải áp dụng các thẻ span (class=fullpost) để ngăn phần miêu tả và phần post đầy đủ. Do vậy nếu bài viết quên không đặt thẻ span y rằng là cả bài nằm trình ình trên blog rồi. Thời gian vừa qua nhờ trao đổi liên kết với http://www.vietwebguide.com nên đã áp dụng được cách thức tạo "Read more - Đọc thêm" một cách tự động, giúp cho blog mới của mình không có read more có thể chủ động tạo link mà không cần phải sửa lại toàn bộ các bài viết.
Tôi xin giới thiệu với các bạn cách tạo Read more tự động có hỗ trợ thumbnail ảnh sưu tầm được trên http://www.vietwebguide.com không phải sử dụng các thẻ span (class=fullpost) để ngăn phần miêu tả và phần post đầy đủ.
Vào Template - Edit HTML, Expand widget, tìm đến thẻ
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); </script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>-->Read More...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Ngoài ra bạn còn phải cho đoạn code dưới đây vào phần HEAD (<head> ... </head>) của template:
<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://www33.websamba.com/anhvosite/blogger/js/summary-post-v20-test.js' type='text/javascript'/>
Các bạn hãy chú ý các thông số màu đỏ mà tôi đã đánh dấu:
summary_noimg là số ký tự phần miêu tả cho các bài không có hình đại diện.
summary_img là số ký tự phần miêu tả cho các bài có hình đại diện.
img_thumb_height chiều cao của hình đại diện (pixel).
img_thumb_width chiều rộng của hình đại diện (pixel).
Bạn có thể tùy chọn được 2 dạng hiển thị:
1. Hiển thị Thumbnail bên trái và Summary bên phải.
2. Nếu bạn muốn Hiển thị Thumbnail ở trên (căn lề giữa) và Summary bên dưới, cái này rất đẹp cho các trang Soft và sưu tập hình ảnh đẹp.
Thì Thêm dòng màu đỏ dưới đây lên trên các dòng code trên, có dạng:
var thumbnail_mode = "no-float" ;
summary_noimg = 430;
...
và Tiếp tục đổi trong code trên link
http://www33.websamba.com/anhvosite/blogger/js/summary-post-v20-test.js
thành
http://www33.websamba.com/anhvosite/blogger/js/summary-post-v30.js
Dòng var thumbnail_mode = "no-float" ;
là chế độ hiển thị của Readmore. Mặc định là no-float: có nghĩa là hiển thị Thumbnail ở trên và Summary ở dưới. Khi bạn dùng chế độ này thì các biến img_thumb_height và img_thumb_width sẽ là chiều cao lớn nhất và chiệu rộng lớn nhất của Thumbnail, chứ không phải là "bằng" nữa. Nếu bạn muốn hiển thị Thumbnail bên phải và Summary bên trái thì sửa no-float thành float.
Nguồn: vietwebguide
0 comments:
Đăng nhận xét
Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» không dung tục, không spam.
» Hãy để lại tên của bạn khi bạn post bài comment, để mình có thể dễ dàng trả lời comment của bạn khi cần.
» Có thể sử dụng các thẻ <b>,<i>,<a>.