Thủ thuật tạo button ẩn hiện nội dung cho Blogger

Lưu ý: Nếu bạn gặp khó khăn với cách làm của bài viết "Thủ thuật tạo button ẩn hiện nội dung cho Blogger" dưới đây hoặc mọi vấn đề khác, hãy gửi câu hỏi cho chúng tôi - TẠI ĐÂY - Đội ngũ lập trình sẽ trả lời và hỗ trợ bạn nhiệt tình sau 3 phút, 24/24h. Ok, giờ chúng ta bắt đầu

Trong khi đăng bài không phải lúc nào bạn xũng muốn hiển thị ra ngoài tất cả các nội dung của bài viết. Với thủ thuật blogger này thì bài viết của bạn sẽ trở nên sinh động và lôi quấn bạn đọc hơn nếu nó được gắn thêm Button cho phép ẩn hiện một phần nội dung khi bạn Click chuột vào nó.

1. Đăng nhập vào Blogger / Blogspot

2. Tạo một bài đăng mới.

3. Bấm vào phần HTML của bài viết và chọn một trong 2 code bên dưới và dán vào phần HTML đó. vào.

3.1. Style 1: Code đơn giản.

<div>
<div>
<input type="button" value="Xem"
 style="width:75px;font-size:10px;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>

3.2. Style: code nâng cao dạng box.

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

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

Ban quản trị:

Bạn đang đọc bài viết "Thủ thuật tạo button ẩn hiện nội dung cho Blogger". Nếu bạn đang gặp khó khăn với cách làm trên hoặc mọi vấn đề khác, hãy gửi câu hỏi cho chúng tôi - TẠI ĐÂY - Đội ngũ lập trình sẽ trả lời bạn sau 3 phút, 24/24h (Nếu bị bật ra quảng cáo, vui lòng nhấn Bỏ Qua Quảng Cáo)