Nút Ẩn / Hiện Cho Bài Viết Blogspot

Giới Thiệu
Hướng Dẫn

Khi các bạn tham gia thảo luận trên cách diễn đàn thì việc các diễn đàn sử dụng spoiler để ẩn hoặc hiện một phần nội dung bài viết là điều thường xuyên.
Demo :

Nội dung đã được thu gọn Hiện Ra!

Trong bài viết này mình sẽ hướng dẫn các bạn cách để đưa tính năng spoiler vào blogger.

Cách này cực kỳ đơn giản. Khi bạn đang soạn thảo bài viết chỉ cần bạn chuyển chế độ soạn thảo bài viết sang html và dán đoạn code dưới đây vào :

<div style="padding: 3px; background-color: #DFEBFA; border: 1px solid #a8cbf7;  font-weight: bold;">
<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>Bấm Ẩn Đi Để Ẩn Nội Dung</b><a style=\'float:right\' href=\'#\' onClick=\'return false;\'>Ẩn Đi</a>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<b>Nội dung đã được thu gọn </b><a style=\'float:right\' href=\'#\' onClick=\'return false;\'>Hiện Ra!</a>'; }" /><b>Nội dung đã được thu gọn </b><a style="float:right" href="#" onClick="return false;">Hiện Ra!</a><br />
</span></div>
<div class="quotecontent">
<div style="display: none;">

{TEXT}

</div>
</div>
</div>

Thay {TEXT} thành NỘI DUNG bạn cần thu gọn.

Thật là đơn giản phải không nào. Chúc các bạn thành công!

Bài viết này có hữu ích không ?!