Một code đơn giản  tạo nút Spoiler ẩn hiện để làm gọn lại nội dung hiển thị trên bài đăng. Đặc biệt là đối với những Blog dùng nhiều hình ảnh trong bài đăng. Dưới đây mình sẽ chia sẻ 2 mẫu Spoiler cho blogspot cho các bạn tùy chọn. Chúc các bạn thành công.
Để sử dụng code, khi viết bài bạn chuyển sang chế độ HTML rồi dán vào vị trí mong muốn là được:


CODE 1 (Chỉ cần dùng 1 trong 2 code nhé)
DEMO nút Spoiler code1:
Nội dung cần chèn (text, ảnh, âm thanh, video...)
<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Tiêu đề trước nút Spoiler</b>: <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 = 'Hiện'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Hiện" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Nội dung cần chèn (text, ảnh, âm thanh, video...)
</div>
</div>
</div>

CODE 2
Nội dung cần hiển thị
<div style="text-align:center"><div><div>
<input 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';}" style="font-size:11px;margin:0;padding:4px;width:75px" type="button" value="Xem" />
</div><div>
<div style="background:#;display:none;padding:4px">
Nội dung cần hiển thị
</div></div></div></div>

Post a Comment

 
Top