Ẩn một phần nội dung bài viết trong blogspot

Ẩn một phần nội dung bài viết trong blogspot
Trong khi đăng bài không phải lúc nào bạn cũ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ó.
Bài này chia sẻ code ẩn hiện một phần nội dung bài viết cho blogspot.

Xem thử:

DEMO

Để thực hiện thủ thuật này tại bên HTML của phần soạn thảo văn bản ta sử dụng code sau:

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 0px;">
<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;">
Phần nội dung bị ẩn </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>
Hoặc dùng code sau
<div>
<div>
<input type="button" value="Xem" style="width:75px; font-size:11px; margin:0px; padding:4px; border="1"" 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;  border:#4F4F4F 1px solid; padding: 4px; background:# ">
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 ở 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.
Nhận xét

Không có nhận xét nào :