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

Bài viết liên quan:

• Tweet
• Share
• Share
• Share
• Share