Nút ẩn hiện (Spoiler) với hiệu ứng đơn giản cho Blogger

Nút ẩn hiện (Spoiler) với hiệu ứng đơn giản cho Blogger
Nút ẩn hiện (Spoiler) xuất hiện hầu như ở phần lớn mọi website đặc biệt là các diễn đàn. Nó là cái nút mà khi bạn muốn ẩn nội dung vì một lý do nào đó (quá dài, 18+, ..), sử dụng khi mà bạn muốn người dùng phải ấn vào để xem nội dung. Hôm nay tại bài viết này mình xin hướng dẫn các bạn thêm nút Spoiler vào blog của các bạn.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Nút ẩn hiện (Spoiler) với hiệu ứng đơn giản cho Blogger

Nút ẩn hiện sử dụng CSS3, HTML, và một ít Javascript, hoạt động hầu hết tất cả các trình duyệt.

Thêm nút ẩn hiện (Spoiler) vào Blogger

1. Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML
2. Tìm đến thẻ ]]></b:skin> và thêm đoạn CSS sau 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;}
3. Sau khi chèn thành công CSS, mỗi lần viết bài dăng, bạn chuyển sang khung soạn thảo bằng HTML và viết theo cấu trúc sau
<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>
4. Bạn có thể thay đổi chữ Ẩn/Hiện thành cái khác tùy bạn, nhưng bạn phải thay đổi cả phần CSS lẫn phần HTML.

5 bình luận

  1. avatar says

    10:12 Ngày 20 tháng 09 năm 2014

    SAO MÌNH CHÈN NÓ KHÔNG HOẠT ĐỘNG VẬY BẠN

  2. avatar says

    15:14 Ngày 20 tháng 09 năm 2014

    Mình check qua site của bạn, không demo không gì hết, bạn nói vậy không sao mà mình biết được vấn đề nó ở đâu :D

  3. avatar says

    18:27 Ngày 28 tháng 11 năm 2014

    Ôi trời thật sự em đang tìm tiện ích này. vậy mà biết đâu đó nơi đây đang có :)

  4. avatar says

    19:29 Ngày 28 tháng 11 năm 2014

    Bài này cũng lâu rồi đăng bài kia anh cũng chợt nhớ link về không ngờ vẫn có người tìm :D

  5. avatar Nặc danh says

    12:53 Ngày 17 tháng 11 năm 2015

    Anh ơi, chỉ em cách làm nút spoiler giống bài trên của anh được không, lúc rê chuột vào thì nó đổi sang màu khác, mấy mã html cho ra cái nút không được đẹp như của anh :)

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.