Loading post navigation ...
 
 

Pro page

16
Nhận xét

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...")

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

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.



Enter your mail address:

16

haitsh1388

em làm như anh mà sao không được, toàn bị lỗi code anh à

fandung-tester

ở thủ thuật này có 2 bứơc, em có thể nói rõ hơn là bị lỗi ở bước nào ko???

ngan ling

blog của em trả có đoạn code trên trả biết thêm ở đâu

Khách (ẩn danh)

chiu , hok tim dc doan code do'

Phan Dũng

mìh nói là tìm code đó hoặc tương tự, tức là không phải giống hoàn toàn,

Bạn có thể tìm dòng này <data:post.body/> là sẽ thấy được đoạn code tương tự như trong bước 5.

maclamkhue

cám ơn bài viết hướng dẫn của bạn,
mà bạn ơi cho mình hỏi làm sao lưu javascript lên host, bạn hướng dẫn mình làm nhé, mình kô rành mấy vụ này cho lắm :) thanks bạn rất nhiều

fandung

@maclamkhue : trước hết bạn phải có 1 cái host cho mình. Do yêu cầu sử dụng của blogger ít nên đa phần xài host free, Bạn có thể đăng kí cho mình 1 tài khỏan ở 1 số host free nào đó. Bạn vào google search, như mình đang xài là của 110mb.com

Mình xài nó mấy tháng nay chưa bị gì, chỉ có lâu lâu nó trục trặc chút, cũng tương đối ổn định

Nếu đăng kí 1 tài khỏan ở mấy cái host này, thông thường nó sẽ cho bạn 1 chỗ để quản lý các file, vào có công cụ cho bạn upload file từ máy của bạn lên host. Mấy cái này cũng tương đối dễ thôi, bạn tìm hiểu từ từ sẽ rõ.

maclamkhue

mình đã tạo 1 acc ở 110mb, vậy nếu muốn dùng cái read more này kết hợp với acc đã tạo thì làm sao đưa java lên và sử dụng vô blog mình như thế nào
xin lỗi vì mình hơi gà về mấy cái vụ này
:)
bạn đừng bực vì cái sự hỏi ngu dốt của mình nhé

TEDDY

mình cũng cùng câu hỏi với maclamkhue !?! down file js là phần nào zị hen, mình thấy cái link có đoạn js của FD nhưng link vào đó thì hem thấy gj cả ^^

Jess

@ngan ling: Có thể bạn quên nhấn vào "Mở rộng tiện ích" chăng? Nên có thể không tìm dc đoạn code đó ...

Nguyễn Duy Đức (•̪●)=ε/̵͇̿̿/’̿’̿ ̿ ̿̿ ̿ ̿””

po tay ban oi sao mjnh` hok co cak

caycanhnonbo

sao em làm rồi mà nó có chữ readmore nhưng thấy không rút gọn được bài viết nơi á

huy bui

Mình làm như bạn nói. Và rất nhiều cách hướng dẫn khác trên web. Nhưng đều giống nhau là : nó không thu gọn vào chỉ xuất hiện cái "redmore" thôi . Còn bài viết vẫn cần đó ký tự.
Bạn rảnh rỗi có thể qua xem thử : http://nghethuattranhviet.blogspot.com/
Yahoo liên hệ của mình là : intermilan_2954@yahoo.com
Rất cám ơn bạn và xin lỗi vì sự bất tiện này!

Ban Nha Dat Quan 7

mình đang sử dụng web www.bannhadatquan7.com ,mình làm được read more nhưng ko thu gòn được bài đăng và hình ảnh,a có cách nào chỉ giúp

Đoàn Thị Thảo

Tay này trình bầy khó hiểu quá.Cầm bút đến mà học cách trình bầy của thăng traidatmui.com nhé!

Vinhomes Cầu Diễn

Biệt thự gamuda
Liền kề gamuda
Biệt thự gamuda



☺ 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:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home