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:



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

.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;}

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>

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

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.