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ớihttp://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ẻ <data:post.body/> và thay nó bằng đoạn code sau:
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:
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:
http://www.sigmirror.com/files/23841_49n3l/summary-post-v20-test.js
thành
http://www.sigmirror.com/files/23842_hrcy7/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.
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ẻ <data:post.body/> và thay nó bằng đoạn code sau:
<b:if cond='data:blog.pageType != "item"'>
<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'>-->đọc tiếp...</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://www.sigmirror.com/files/23841_49n3l/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;
...http://www.sigmirror.com/files/23841_49n3l/summary-post-v20-test.js
thành
http://www.sigmirror.com/files/23842_hrcy7/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.
Vừa qua do host samba bị lỗi, phattrien@so đã thay host lưu trữ file js, giờ các bạn có thể áp dụng theo hướng dẫn trên hoặc bạn có thể thao khảo bản mới tại: Phiên bản mới tạo chức năng “Read more – Đọc tiếp” cho Blogspot
0 nhận xét:
Đăng nhận xét
Các bạn hãy cho Saigonnews về nhận xét nha để Saigonnews ngày một hoàn thiện hơn.Thanks