NỘI DUNG CỦA TAB 1
NỘI DUNG CỦA TAB 2
NỘI DUNG CỦA TAB 3
NỘI DUNG CỦA TAB 4
NỘI DUNG CỦA TAB 5
Chèn nột dung muốn hiển thị
Home » Thủ thuật Blogspot » Button - Thủ thuật tạo button ẩn hiện nội dung cho Blogger

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

Unknown || || || Leave a nhận xét
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ó.

>>Drop Down Menu - Thủ thuật Menu xổ xuống tự động cập nhật cho Label Blogger
>>Drop Menu - Thủ thuật tạo Menu click thì xổ dọc xuống Blogger
>>Trang chủ - Thủ thuật code đặt website làm trang chủ trình duyệt cho Blogger
>>Loading - Thủ thuật tạo hiệu ứng loading cho Blogger
>>Code - Thủ thuật tạo khung chứa Code có nút Chọn tất cả cho Blogger
>>Breadrumbs - Thủ thuật tạo Breadrumbs cho Blogger / Blogspot
>>2 Columns - Thủ thuật tạo 2 cột cho Main Blogger

Trạng thái đang ẩn:
Trạng thái được bung ra:

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.
Với mục tiêu xây dựng công ty theo ba tiêu chí sáng tạo, có tầm nhìn và đi trước thời đại, chúng tôi đã không ngừng học hỏi, chia sẻ kiến thức, đầu tư nguồn nhân lực tài năng với một tinh thần làm việc nghiêm túc, cống hiến hết mình và luôn đặt ra những tiêu chuẩn cao nhất để những sản phẩm chúng tôi tạo ra, luôn là những sản phẩm tốt nhất, tuyệt vời nhất và hoàn hảo nhất.
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>
  • 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ự.
/[ 0 nhận xét Untuk Artikel Button - Thủ thuật tạo button ẩn hiện nội dung cho Blogger]\


Đăng nhận xét