Spoiler Blogspot, WordPress - Ẩn, Hiện nội dung bài viết cho 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.
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ạnchuyển chế độ soạn thảo bài viết sang html và dán đoạn code dưới đây vào:
01 02 03 04 05 06 07 08 09 10 | <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> |
Kết quả là:
Viết gì bạn muốn:
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 HTML tìm đến thẻ ]]></b:skin> thêm vào bên trên:
1 2 3 4 5 | .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:
1 2 3 4 | <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.
Nếu bài viết hữu ích hãy đăng ký Kênh Youtube của tôi
ConversionConversion EmoticonEmoticon