Cách tạo Button ẩn/hiện nội dung đơn giản bằng CSS cho Blogspot

tao nut an hien noi dung khi nhan nut bang css cho blogspot

Nếu bạn muốn làm một trang giải các câu đố nhưng lại không muốn người đọc xem trước đáp án, hoặc nếu bạn muốn chia sẻ một đoạn mã hay đoạn văn nào đó mà nó quá dài làm mất tính thẩm mỹ,... thì với thủ thuật này sẽ giúp bạn khắc phục được điều đó.

Thủ thuật này sẽ giúp bạn ẩn đi những nội dung mà bạn muốn giấu và khi muốn hiện ra thì bạn hoặc người đọc chỉ cần nhấn vào nút đó thì nội dung lập tức sẽ được hiện ra ngay. Và dĩ nhiên, thủ thuật này rất đơn giản chỉ bằng một đoạn mã Javascript nhỏ là có thể thực hiện được.

Mình sẽ sử dụng thủ thuật cho chính bài viết này, bạn hay nhấn thử các nút ở bên dưới để xem thủ thuật này hoạt động như thế nào.

Bây giờ, chúng ta cùng bắt đầu thực hiện nào.

Nút ẩn/hiện nội dung cực đơn giản

Bước 1. Đăng nhập tài khoản Blogger > Chủ đề > Chỉnh sửa HTML.

Bước 2. Chép đoạn mã CSS dưới đây vào trước thẻ đóng ]]></b:skin>.

.togglebox, .togglebox + label + div {display:none}
.togglebox + label {cursor:pointer; display:block; background:#069; color:#fff; width:75px; font-size:12px; text-align:center; border-radius:5px; padding:3px 0}
.togglebox:checked + label + div {display:block; background:#f1f1f1; padding:10px; margin:5px 0 20px 0}

Bước 3. Nhấn vào nút Lưu chủ đề để hoàn tất.

Bây giờ, hãy đặt đoạn mã HTML dưới đây vào nơi mà bạn muốn. Nếu bạn muốn đặt nút ẩn hiện này ở trong bài viết thì hãy chuyển sang dạng HTML trước khi soạn thảo nội dung.

<input class='togglebox' id='buttonbox' type='checkbox'/>
<label for='buttonbox'>Nút ẩn/hiện</label>
<div>Bạn hãy đặt nội dung muốn ẩn ở đây...</div>

Có một điểm mà bạn cần chú ý là nút ẩn hiện này chỉ có tác dụng với cặp thẻ <div> </div> gần nhất. Do đó, nếu bạn muốn ẩn nội dung nào cứ để hết nội dung vô cặp thẻ đó là được.

Ngoài ra, nguyên tắc hoạt động của thủ thuật này là dựa vào sự liên kết giữa id='buttonbox'for='buttonbox'. Do đó, nếu bạn muốn sử dụng nhiều nút ẩn hiện trong bài viết thì hãy nhớ thay đổi nội dung trong dấu nháy sao cho tương ứng, nếu không sẽ gây ra sự lẫn lộn giữa các nút.

Chúc bạn thành công!