Làm sao để ẩn một phần nội dung bài viết một cách dễ dàng trong Blogger (Blogspot)


Viếng thăm một số diễn đàn , mình thấy có 1 code rất hay , dùng để ẩn/hiện (Hide/Show) một đoạn văn bản chỉ với một nút click chuột. Đoạn code này có tên là Spoiler Tag, được sử dụng dưới dạng ngôn ngữ BBCode (dùng trong forum) , có chức năng giúp trang tải nhanh hơn vì không hiển thị hết toàn bộ nội dung. Nay mình xin giới thiệu cho các bạn, nếu thích hãy sử dụng nó nhé.
Dưới đây là một mẫu ví dụ :

Spoiler :
Đây là mẫu
Widget bởi boyproDX's Blog

Bạn thấy thế nào ? Rất tuyệt đúng không. Và giờ , để sử dụng nó , bạn cần thêm đoạn code sau đây trong bài viết và làm theo hướng dẫn
<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 0px;">
Spoiler: <input value="Xem" style="margin: 0px; padding: 0px; width: 45px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')  {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Ẩn';  } else {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';  this.innerText = ''; this.value = 'Xem';  }" type="button">
</div><div><div style="display: none;">Đoạn text của bạn tại đây</div></div></div>

Thay đổi Đoạn text của bạn tại đây thành Phần nội dung bạn muốn ẩn , bạn cũng có thể xóa chữ Spoiler mà không gây lỗi cho code. Chúc bạn thành công

P/s : Theo yêu cầu của bạn đọc, mình sẽ cung cấp thêm đoạn code phụ để xử lý tình trạng gây khó khăn cho người đọc : Khi bài đăng quá dài, nếu muốn ẩn , thì phải kéo lên trên để thực hiện thao tác nhấn nút Ẩn , gây phiền phức.
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 0px;">
Spoiler: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')  {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Ẩn';  } else {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';  this.innerText = ''; this.value = 'Xem';  }" style="font-size: 10px; margin: 0px; padding: 0px; width: 45px;" type="button" value="Xem" /></div>
<div>
<div style="display: none;">
Đoạn text của bạn tại đây</div>
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')  {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Ẩn';  } else {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';  this.innerText = ''; this.value = 'Xem';  }" style="font-size: 10px; margin: 0px; padding: 0px; width: 45px;" type="button" value="Ẩn" /></div>
</div>

10 Nhận xét on "Làm sao để ẩn một phần nội dung bài viết một cách dễ dàng trong Blogger (Blogspot)"

trần văn hiếu on 4 October 2008 at 12:32 said...

đoan code rất hay, mình làm dc rồi, chạy rất ngon, nhưng vấn đề ở chỗ khi bài đăng của mình wá dài người ta đọc tới cuối xong thì phải trở lại phần đầu để bấm vào nút ẩn thì nó mới ẩn dc. tóm lại bạn có thể chèn thêm vào đoạn code trên sao cho ở cuối cũng có một cái nút ẩn/hiện như ở trên đầu dc ko. cảm ơn vì bài viết

Benjami Tennyson on 4 October 2008 at 22:58 said...

Đã update cách khắc phục. Chúc bạn thành công !

starburst_bms on 18 January 2009 at 12:15 said...

mình có thể chèn ảnh trong phần ẩn đc ko boy :P

Benjami Tennyson on 18 January 2009 at 18:34 said...

Tất nhiên là được chứ bạn :D

Ngankvn ® on 26 February 2009 at 10:15 said...

Code đã cải tiến , nhưng chữ "ẩn" phía dưới cùng đáng lẽ chỉ xuất hiện sau khi đã bấm xem . Còn Ở đây thì nó lúc nào cũng xuất hiện cả @@ , cải tiến thêm đi Benjami Tennyson :D

Benjami Tennyson on 28 February 2009 at 10:45 said...

@Ngankvn : Hì, HTML mình còn gà lắm ^^!, sợ ko đủ trình độ để cải tiến code theo yêu cầu của Ngân. Để hôm nào mình mò thử xem coi có chỉnh được ko :D

Ngankvn ® on 28 February 2009 at 11:17 said...

Cậu có gà cũng là dạng .... gà cồ =)) , tớ là gà con =))

Nguyễn Thế Thông on 19 October 2009 at 02:56 said...
This comment has been removed by the author.
Nguyễn Thế Thông on 19 October 2009 at 04:08 said...

Mình muốn Ẩn/Hiện nội dung bài viết của mình trong Bolgger.com phải làm sao? Mình muốn giống trang download của BKAV (http://www.bkav.com.vn/home/MuatheBkav2.aspx?d=9 ) đó, khi click vào dòng (1. Lý do bạn nên mua thẻ bản quyền BkavPro ?) thì nội dung ẩn của dòng này hiện ra, còn khi click vào dòng (2. Tính năng của BkavPro có bản quyền.) thì nội dung của dòng này hiện ra và dòng kia thì đóng lại
Ai bít thì chỉ cho mình với !!!!!!!!!!!!

ve sinh con nghiep on 5 April 2012 at 17:35 said...

Làm thế nào để khi khách reply, hay đăng nhập mới xem được bài viết hả cậu.
nếu được cho mình xin code với, đang cần quá

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

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3