Thêm Spoiler vào Blogspot và WordPress để Ẩn – Hiện nội dung bài viết

Blogger Thủ thuật

{ 14 comments }

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

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:

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

.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:

<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

Xem thêm  Thêm mô tả tìm kiếm cho bài viết trong Blogger – Blogspot

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.

Góp ý cho Tô Triều

  • trong 03/12/2016, 10:08

    bí mật mk yahoo

    Reply
  • Nguyên van ha em 30/07/2016, 12:33

    Đăng nhập tài khoản không được

    Reply
  • Nguyên 19/12/2014, 13:10

    Cái này có bị ảnh hưởng xấu đến thứ hạng website không cậu ? Vì google không thích những thứ về text ẩn cho lắm

    Reply
  • Kỉ Tiếu Nguyệt 05/06/2014, 09:18

    😀 tks anh rất nhiều, cách 1 làm rất tốt, tuy hình thức bên ngoài không được đẹp cho lắm. Cách 2 thì wp không làm được, có nút ẩn/hiện nhưng mà nội dung cần ẩn thì nó vẫn hiện như thường 😐

    Reply
    • Hải Triều 06/06/2014, 09:41

      Cám ơn em đã góp ý. Để anh kiểm tra lại và cập nhật nhé

  • HUY 09/03/2014, 23:19

    Cảm ơn bạn, nhưng cái code đầu tiên vẫn bị lỗi, khi click vào chữ hiện, đoạn bài viết đã hiện ra nhưng chữ hiện không chuyên sang chữ ẩn
    Bạn xem thử ở đây: http://share-for-everyone.blogspot.com/2014/03/Most-Popular-Social-Networking-Sites-of-the-World-2014.html

    Reply
  • LOUISLONG 13/02/2014, 00:37

    chuan khong can chinh, tot nhat cu viet code ngoai roi paste vao khoi bi nhay lung tung.

    Reply
    • Tô Hải Triều 13/02/2014, 01:09

      Trước giờ mình luôn làm thế để tránh những lỗi không đáng có Và cũng là để chuẩn hóa code khi out.

  • Nhật Đông 12/02/2014, 12:09

    Sao không chế cái Shortcode cho nó lẹ hè 😀

    Reply
    • Tô Hải Triều 12/02/2014, 14:00

      Lý do mình cũng nêu trong blog rồi. 1 là không dùng plugin, 2 là ko dùng jQuery hoặc javascript. Đây là cách đơn giản nhất hì hì. Về shortcode chắc sẽ ở bài viết sau nhưng ứng dụng cho những thứ khác.

  • Tugumi 12/02/2014, 09:13

    Cảm ơn anh nhiều lắm ạ!!! 2 vấn đề e lăn tăn đều giải quyết được rồi ^O^
    E k biết html nên hoa hết cả mắt, làm đi làm lại mới được.
    p/s: Ở chỗ *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:*
    Đoạn code bên dưới a chưa đóng thẻ div
    Cách này e áp dụng không được, nó hiện ra nút Ẩn nhưng phần mình cần ẩn vẫn hiện như bình thường, nhấn vào nút Ẩn nó nháy 1 cái mà không chịu hoạt động.
    Đằng nào cũng không nhớ code, phải copy nên cách 1 hay nhất. Chỉnh được cả cái title >m<

    Reply
    • Tô Hải Triều 12/02/2014, 09:16

      Cám ơn em đã nhắc nhở. Để anh cập nhật lại. Chắc nửa đêm ngồi gõ nên bị lẩm cẩm.

    • Tugumi 12/02/2014, 09:26

      À, khi mình post code này vào rồi, nhấn sang tab compose để trở về chế độ soạn thảo trực quan thì phần bài viết đặt trong thẻ spoiler sẽ bị giấu trong nút Ẩn luôn, click vào không hiện ra nữa. Muốn sửa nội dung phần đó phải sang tab html. Mà em thấy thì toàn giun với dế @.@

    • Tô Hải Triều 12/02/2014, 10:41

      Đúng rồi vì khi từ visual editor qua html thì hầu hết các code đều được convert hết. Anh góp ý là em soạn bài viết trên máy tính trước sau đó phần code để tách riêng ra. Định dạng xong bài viết thì paste code vào và preview sau đó publish luôn.