Nút ẩn hiện (Spoiler) với hiệu ứng đơn giản cho Blogger
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.
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 HTML2. 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.
lúc 10:12 20 tháng 9, 2014
SAO MÌNH CHÈN NÓ KHÔNG HOẠT ĐỘNG VẬY BẠN
lúc 15:14 20 tháng 9, 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
lúc 18:27 28 tháng 11, 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ó :)
lúc 19:29 28 tháng 11, 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
lúc 12:53 17 tháng 11, 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 :)