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