 |
| Hướng Dẫn Tạo Tab Ẩn Hiện Nội Dung Cực Đẹp Cho Blogspot |
Hello chào mừng các bạn đã quay lại với Blog của mình, ở bài viết hôm nay mình sẽ hướng dẫn các bạn cách tạo Tab ẩn hiện nội dung cực đẹp cho blogspot.
Giới Thiệu
Tab ẩn hiện nội dung được sử dụng như một mục lục giới thiệu hoặc hướng dẫn cho bài viết thêm chuyên nghiệp và gọn hơn rất nhiều, cách làm rất đơn giản thôi các bạn cùng xem bài viết hướng dẫn bên dưới nhe.
Hướng Dẫn
Đầu tiên các bạn Copy đoạn code Css dưới đây và dán trước cặp thẻ ]]></b:skin>
/* Hide/Show Content CSS */
.identifier {}
.toggle-box {display: none;}
.toggle-box + label {cursor: pointer;display: block;font-weight: bold;line-height: 21px;margin-bottom: 1px;padding:3px 5px;color:#3B5998;background-color: #eee;}
.toggle-box + label + div {display: none;margin-bottom: 5px;}
.toggle-box:checked + label + div {display: block;}
.toggle-box + label:before {background-color: #4F5150;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;color: #FFFFFF;content: "+";display: block;float: right;font-weight: bold;height: 20px;line-height: 20px;margin-right: 5px;text-align: center;width: 20px;}
.toggle-box:checked + label:before {content: "\2212";}
HTML <input class="toggle-box" id="identifier-1" type="checkbox" >
<label for="identifier-1">Tiêu đề nội dung ẩn 1</label>
<div>Nội dung đang ẩn 1.</div>
<input class="toggle-box" id="identifier-2" type="checkbox" >
<label for="identifier-2">Tiêu đề nội dung ẩn 2</label>
<div>Nội dung đang ẩn 2.</div>
<input class="toggle-box" id="identifier-3" type="checkbox" >
<label for="identifier-3">Tiêu đề nội dung ẩn 3</label>
<div>Nội dung đang ẩn 3.</div>
Lời Kết
Vậy là vừa rồi mình đã hướng dẫn các bạn cách tạo Tab ẩn hiện nội dung cho Blogspot, nếu thấy bài viết có ích hãy chia sẻ đến bạn bè nhe!
