Tạo button ẩn/hiện nội dung bài viết cho blogspot

Trong khi đăng bài không phải lúc nào bạn xũng muốn hiển thị ra ngoài tất cả các nội dung của bài viết. Bài viết của bạn sẽ trở nên sinh động và lôi quấn bạn đọc hơn nếu nó được gắn thêm Button cho phép ẩn hiện một phần nội dung khi bạn Click chuột vào nó.
Các bạn có thể xem đemo hoặc ấn vào Button ở bên dưới để xem thử

VIEW DEMO

¤  Thêm vào bài viết.

1. Đăng nhập vào blog.

2. tạo một bài đăng mới.

3. bấm vào phần HTML của bài viết và chọn một trong 2 code bên dưới và dán vào phần HTML đó. vào.

3.1. Style 1: Codeđơn giản.

Bấm vào button bên dưới để xem demo:

Đây là phần nội dung bị ẩn. Khi bạn bấm vào chữ Xem phần demo thì phần này sẽ được hiển thị. Bấm tiếp vào chữ Ẩn thì phần này sẽ được ẩn đi.

<div>
<div>
<input type="button" value="Xem"
 style="width:75px;font-size:10px;margin:0px;padding:0px;" 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'; }">
</div>
<div>
<div style="display: none;">
{Phần nội dung bị ẩn}
</div>
</div>
</div>

3.2. Style: code nâng cao dạng box.
Demo:

Spoiler: show

{Demo style 2: Phần nội dung bị ẩn}

<div style="padding: 3px; background-color: #FFFFFF; border: 1px solid #d8d8d8; font-size: 1em;"><div style="text-transform: uppercase; border-bottom: 1px solid #CCCCCC; margin-bottom: 3px; font-size: 0.8em; font-weight: bold; display: block;"><span 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.innerHTML = '<b>Spoiler: </b><a href=\'#\' onClick=\'return false;\'>hide</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b>Spoiler: </b><a href=\'#\' onClick=\'return false;\'>show</a>'; }" /><b>Spoiler: </b><a href="#" onClick="return false;">show</a></span></div><div class="quotecontent"><div style="display: none;">{Phần nội dung bị ẩn}</div></div></div>

» Tùy chỉnh code:

-Thay thế dòng {phần nội dung bị ẩn} thành nội dung bài viết của bạn là xong.

- Thay các chữ Xem và Ẩn màu đỏ ở trên theo ý muốn của bạn.

- Nếu bạn muốn tạo nhiều nút Ẩn/Hiện trong bài viết của mình thì cứ làm tương tự.

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