[WordPress] - Thêm nút ẩn hiện nội dung bài viết vào Blogspot và WordPress

Ẩn hiện nội dung bài viết vào Blogspot và WordPress

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.

Add caption

Thêm Spoiler vào Blogspot và WordPress

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 trong cả blogger và wordpress.
Có hai cách để thêm spoiler vào blogger và wordrepss cực đơn giản mà không dùng đến bất cứ plugin nào.

1. Thêm spoiler vào blogger – wordpress bằng html

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:
Xem Code

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Title of 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;">
Chèn bất cứ thứ gì mà bạn muốn nó ẩn ở đây kể cả hình ảnh, video bla bla
</div></div></div>

Demo:

Title of Spoiler:

Chèn bất cứ thứ gì mà bạn muốn nó ẩn ở đây kể cả hình ảnh, video bla bla

2. Thêm Spoiler vào Blogger – WordPress bằng CSS + HTML

Đối với Blogger các bạn đăng nhập vào khu quản lý, tìm đến Mẫu –> Chỉnh sửa HTMLtìm đến thẻ ]]></b:skin> thêm vào bên trên:
Xem Code

.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;}

Và khi viết bài bạn chuyển chế độ soạn thảo là HTML thêm đoạn code sau vào trong bài viết:
Xem Code

<div><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></div

Đối với WordPress bạn chỉ cần thêm đoạn code CSS phía trên vào cuối cùng của file CSS sau đó khi viết bài cũng làm tương tự như đã làm với Blogger

Thay phần: Nội dung mà bạn muốn ẩn bằng hoặc chữ Ẩn, Hiện bằng những gì mà bạn muốn.

Trên đây là hai cách dễ nhất để thêm spoiler vào blogspot và wordpress để ẩn đi một phần nội dung bài viết. Phương pháp này được áp dụng cho các bài viết dài hoặc nhiều hình ảnh giúp người đọc đỡ phần scroll trang.

Nguồn : tohaitrieu.net