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.
Nội dung mà bạn muốn ẩn
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.
"nguồn bài viết từ KslZone.NET".
0 nhận xét:
Đăng nhận xét