Tạo nút ""Mở rộng/Thu gọn" bài viết (Bonus : kèm theo hướng dẫn tạo tiện ích "Read More...")

Add Expand/Collapse hack Link below each Post

[FD's BlOg] - Các bạn đã khá quen với tiện "Read More..." ở mỗi bài viết, nó tạo cho blog 1 bố cục gọn gàng. Tương tự như thế, hôm nay mình xin giới thiệu cho các bạn 1 phương pháp khác, cũng tương tự như tiện ích "Read more..." đó là tiện ích "Mở rộng/thu gọn" bài viết.

Với tiện ích này, bạn muốn xem xài viết chỉ cần nhấp vào là có thể xem, không cần phải load lại trang, và nếu muốn thu gọn lại thì bạn cũng nhấp vào là ta có thể thu gọn lại bài viết.

Và tiện thể đây mình cũng xin giới thiệu luôn tiện ích "Read More..."

A. Tạo tiện ích "Read More..."
1. Đăng nhập blog
2. Vào Bố cục (Layout)
3. Vào chỉnh sửa code HTML (Chọn mở rộng tiện ích)
4. Chèn đọan javascript bên dưới vào trước thẻ </head>

<!-- JavaScript Posts Summaries -->
<script language='javascript' src='http://www.sigmirror.com/files/16723_kc9lz/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://www.sigmirror.com/files/16722_nbdvm/jquery.extractor.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {

$(&#39;.excerpt&#39;).expander({
slicePoint: 450, // default is 100
expandEffect: &#39;fadeIn&#39;,
expandText: &#39;[...]&#39;, // default is &#39;read more...&#39;
userCollapseText: &#39;[^]&#39; // default is &#39;[collapse expanded text]&#39;
});

});
</script>
<!-- End JavaScript Posts Summaries -->

5. Tìm đọan code bên dưới hoặc tương tự:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

6. Sửa lại thành:

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<a expr:href="data:post.url">Read More..</a>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

7. Save lại, và nó sẽ trông như hình bên dưới:


B. Tạo tiện ích "Mở rộng/thu gọn" bài viết.
- Đối với ai không thích sử dụng tiện ích Read More... thì có thể tham khảo cách này.

1. Tương tự như cách làm ở trên, ta chỉ chỉnh sửa 1 chút ở đọan javascript, và sửa nó lại như hình bên dưới:

<!-- JavaScript Posts Summaries -->
<script language='javascript' src='http://www.sigmirror.com/files/16723_kc9lz/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://www.sigmirror.com/16742_fgkbf/jquery.expander.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {

$(&#39;.excerpt&#39;).expander({
slicePoint: 450, // default is 100
expandEffect: &#39;fadeIn&#39;,
expandText: &#39;[...]&#39;, // default is &#39;read more...&#39;
userCollapseText: &#39;[^]&#39; // default is &#39;[collapse expanded text]&#39;
});

});
</script>
<!-- End JavaScript Posts Summaries -->

2. Tiếp tục bước 2 là xóa dòng code màu đỏ như trong đọan code bên dưới. (Bước này chỉ áp dụng cho những ai đã hack tiện ích "Read More..." rồi)

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<a expr:href="data:post.url">Read More..</a>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

3. Xóa đọan code màu đỏ đi và save template lại là xong.

Xem hình minh họa bên dưới.


Lưu ý: để tránh việc đọan javascript ko chạy (do hết bandwidth vì nhiều người dùng chung) nên bạn phải download file java về máy của bạn và up lên host riêng của bạn.

Nguồn : tham khảo trên Internet

Chúc các bạn thành công.