Thu gọn bài viết - Peek-a-boo

Update ngày 13/7/2007. Bài này là biên tập lại từ Beautiful Beta của Hans.

Mục đích:

Sau khi làm xong, blog bạn sẽ có phần Xem toàn bộ và Thu gọn như blog mình.

Các Bước:

Bước 0: Lưu trữ

Vào Dashboard → Layout → Edit HTML → Download Full Template.

Bước 1: Chèn Javascript

Tìm đoạn <head>, chèn dòng sau vào ngay dưới dòng <head>

<script src="http://site.gman.googlepages.com/peekapoo.js" type='text/javascript' />

Save template lại.
Chú ý: bạn nên click vào link trên để download file peekapoo.js này về rồi up lên host riêng của bạn. Việc làm này có tác dụng phòng tránh trường hợp "cháy bandwidth". Tạo host đơn giản nhất tại trang Google Pages.

Bước 2: Sửa Includable

Sau khi làm xong bước một, tại trang Edit HTML, chọn checkbox Expand Widget Template. Trang sẽ tự load lại. Lúc này nó đã dài hơn.

Tìm tới đoạn sau:

<div class='post-body'>
<p><data:post.body/></p>

Sửa thành

<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>↓ Xem toàn bộ ↓</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>↑ Thu gọn ↑</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

Save template lại là xong.
Chú ý: "↓ Xem toàn bộ ↓" và "↑ Thu gọn ↑" có thể thay đổi, chấp nhận HTML.

Bước 3: Kích hoạt

Từ nay, mỗi khi post bài mới, nếu bạn muốn sử dụng chức năng peek-a-boo này bạn cần viết như sau:

Đoạn tổng quát...
<span id="fullpost">
Phần còn lại của bài...
</span>

Nếu bạn muốn nó luôn xuất hiện trong các bài viết mới thì bạn cần làm những bước sau:

Vào Dashboard → Settings → Formatting → Post Template. Viết vào thế này:

Đoạn đầu
<span id="fullpost">
Phần còn lại
</span>

Nếu làm vậy thì từ nay, đoạn vừa nhập sẽ luôn xuất hiện trong bài viết mới của bạn. (Nhưng mình khuyến cáo, không nên làm vậy, dễ bị lỗi. Tốt nhất là đặt 2 tag <span id="fullpost"> </span> vào sau khi đã soạn thảo xong)



Ý nghĩa, giải thích

Khi bạn post bài, từ trang chủ sẽ có dạng:

  • Đoạn đầu luôn luôn xuất hiện.
  • Các đoạn tiếp theo sẽ bị giấu.
  • Link Xem toàn bộ xuất hiện.
  • Link Thu gọn sẽ không xuất hiện.

Khi bạn xem từ trang bài viết:

  • Đoạn đầu xuất hiện.
  • Đoạn tiếp theo xuất hiện
  • 2 link Xem toàn bộ và Thu gọn không xuất hiện

Nếu bạn không có 2 thẻ span trong bài thì từ trang chủ hay trang bài viết đều xuất hiện toàn bộ bài viết và không có 2 link kia.

16 comments:

  1. phuc tap qua >_<

    ReplyDelete
  2. không phức tạp đâu. Thực ra, chỉ làm có 1 công việc là copy và paste à. Cực lẹ.

    ReplyDelete
  3. em hoc truong Le Hong Phong a`? Chị nghĩ em nhỏ hơn chị 10 tuổi í. ;;)

    ReplyDelete
  4. :), em là 2005-2008 đấy. Chị năm nào thế

    ReplyDelete
  5. chị post comment xong phải chờ em coi đã rồi nó mới cho xuất hiện

    ReplyDelete
  6. oái, thảo nào thấy ghi là mọi comments phải dc tác giả chấp nhận! hehe
    Chi hoc Nguyen Thi Minh Khai. Nhưng nhìn áo thể dục của trường LHP thì chị nhận ra!
    Chị cũng ko ngờ viết blog như chị mà cũng có người đọc.
    :D :D :D

    ReplyDelete
  7. mà chị bao nhiêu tuổi rồi, hơn em 10 tuổi tức là 26 à

    ReplyDelete
  8. vì chị thất tình nên có phần già trước tuổi em à ;)) ;)) ;))

    ReplyDelete
  9. em nghĩ mình chat trong cái trung tâm hú đi chị. Nằm dưới cái Label Cloud đó

    ReplyDelete
  10. blog em hành choáng quá
    :D :D :D
    chi đã thấy trung tam Hú rồi
    nhưng tạm thời chị chưa hú được vì phải đi ngủ phát
    à, mà chị đọc cái tiêu chuẩn chọn bạn gái của em, chị thấy chị cũng được lắm đấy, mỗi tội hơi già
    :"> :"> :">
    nice to "meet" u hén

    ReplyDelete
  11. Chị cũng ko biết em có phải người đầu tiên đọc blog chị ko :D
    Nhưng em là người thứ 2 comment blog chị.
    Chị dốt vi tính nhất quả đất, may mắn sao lại gặp được em
    hehe
    À, mà chị tên Vân Anh

    ReplyDelete
  12. hì hì, em biết chị tên VA rồi. Tại vì lúc em tìm blog bạn em (cũng tên Vân Anh) thì em mới mò ra blog chị đấy thôi.
    Cứ gọi em là Tùng

    ReplyDelete
  13. cho hoi cach lam cua ban co the dung vao bai viet van ban ko?vi minh doc thay nhu la dang HTML vay?

    ReplyDelete
  14. sao không cho cái demo cậu, chưa thấy nên vẫn k dám thử :D Ngại lại phải restore

    ReplyDelete
  15. @DuyAnh: hiện giờ blogger đã có sẵn chức năng này rồi cho nên chúng ta ko cần hack nữa. Bài viết này đã quá date rồi :D.
    Hiện tại nếu bạn muốn có read more thì chỉ cần phần chia đoạn summary với đoạn fullpost bằng dòng
    <!--more-->

    ReplyDelete

You can use some HTML tags, such as <b>, <i>, <a>