Tạo nút lệnh Button ẩn/hiện nội dung bài viết, ẩn hiện mục lục chuyên nghiệp

1. Cách 1.Tạo nút lệnh ẩn hiện cho bài viết Sau khi đăng nhập vào blog ta thực hiện các bước sau: 

Bước 1.Thêm bài đăng mới

Bước 2.Trong phần nội dung bài viết ta chuyển sang chế độ HTML và dán code sau đây vào khung soạn thảo:

<div>

<div>

<input type="button" value="Xem"

 style="width:75px;font-size:14px;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>

Demo:

{Phần nội dung bị ẩn}

2. Cách 2. Thêm nút ẩn hiện (Spoiler) vào Blogger

Bước 1. Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML
Bước 2. Tìm đến thẻ ]]></b:skin> và thêm đoạn CSS sau vào bên trên

.spoilerbutton {display:block;margin:5px 0;}
.spoiler {overflow:hidden;background: #f5f5f5;}
.spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}
.spoilerbutton[value="Hiện"] + .spoiler > div {margin-top:-100%;}
.spoilerbutton[value="Ẩn"] + .spoiler {padding:5px;}

Bước 3. khi chèn thành công CSS, mỗi lần viết bài đăng, bạn chuyển sang khung soạn thảo bằng HTML và viết theo cấu trúc sau:

input class="spoilerbutton" type="button" value="Hiện" onclick="this.value=this.value=='Hiện'?'Ẩn':'Hiện';"><div class="spoiler"><div>
Nội dung mà bạn muốn ẩn
</div></div>

Bước 4. Bạn có thể thay đổi chữ Ẩn/Hiện thành cái khác tùy bạn, nhưng bạn phải thay đổi cả phần CSS lẫn phần HTML.
3. Cách 3: Style code nâng cao dạng box.

<div style="padding: 3px; background-color: #FFFFFF; border: 3px solid #008000; font-size: 1.25em;"><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;\'>Ẩn</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;">Hiện</a></span></div><div class="quotecontent"><div style="display: none;">{Phần nội dung bị ẩn}</div></div></div>

Demo:

Spoiler: Hiện

{Phần nội dung bị ẩn}

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ự.