Tạo nút với nội dung mở rộng trên blogger/ blogspot

 Việc tạo ra một nút có khả năng ẩn hiện nội dung mở rộng rất có ích cho việc trình bày một bài viết gọn gàng và chuyên nghiệp. Như ví dụ trong blog của tôi có các bài học tiếng Anh có nút "Dịch sang tiếng Việt" với nút này bạn có thể lập tức mở rộng nội dung phần dịch để xem nghĩa tiếng Việt mà không phải tải trang mới. 

Để làm được điều này bạn sẽ cần đến một đoạn mã CSS chèn vào khung bài viết ở chế độ soạn thảo HTML với đoạn mã 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:# ">
NỘI DUNG CẦN HIỂN THỊ
</div>
</div>
</div>

 Trong đoạn mã trên bạn sẽ bạn sẽ tạo nút "Xem" với nội dung được chèn vào phần chữ đỏ, khi bấm vào nút này thì phần nội dung sẽ được mở rộng ra.

Chú ý: đối với nội dung được chèn vào làm phần mở rộng mà có nhiều đoạn thì nhớ chèn thêm thẻ <br /> trước mỗi đoạn nhé, nếu không thì sẽ biến toàn bộ nội dung thành một dòng duy nhất đấy.

Xong thì chuyển sang chế độ Viết để kiểm tra, khi nào bạn xuất bản bài viết thì nút mới hoạt động.