Bạn muốn tiết kiệm không gian blog khi
viết bài, tạo sự tiện lợi trong việc tương tác người đọc. Hôm nay i khám phá sẽ
chia sẽ cách tạo nhiều tab nội dung cho một bài viết. Tab cho phép bạn chuyển nội
dung nhanh chóng, khi một nội dung nội dung mới hiển thị thì nội dung cũ ẩn đi.
 |
| Tab nội dung bài viết ví dụ |
Cách làm:
Bước 1: Đăng nhập blogspot à Mẫu à Chỉnh Sửa HTML
Bước 2: Chèn đoạn code sau vào ngay sau thẻ <head>
<script language='javascript' src='https://googledrive.com/host/0B9GaSUrdVodCdU9UeG14a1RGcUk' type='text/javascript'/>
Bước 3: Tiếp đến bạn thêm code bên dưới vào trước thẻ ]]></b:skin>
div.domtab {
padding:0;
width:600px; /*Độ rộng của tab*/
font-size:110%; /*Cỡ chữ của tab*/
}
ul.domtabs
{
float:left;
width:100%;
margin:0;
list-style:none;
padding-left: 0;
}
ul.domtabs li
{
float:left;
padding:0px 1px 0px 0px;
margin:0px 5px 5px 5px !important;
text-align: center;
}
ul.domtabs a{
padding:15px 15px 15px 15px;
display:block;
background:#333333; /*màu nền của thư mục trong tab*/
color: #fff; /*màu text của thư mục trong tab*/
height:1em;
font-weight:bold;
text-decoration:none;
}
ul.domtabs a:hover{
color: #fff; /*màu text của thư mục trong tab khi rê chuột*/
background: #2da5da; /*màu nền của thư mục trong tab khi rê chuột*/
}
div.domtab div {
clear:both;
width:auto;
padding:0 2px;
margin: 0 0 1em 0;
}
div.domtab div {display: block; clear: both;}
- Bạn dựa vào các dòng chữ hướng dẫn (màu xanh) và chỉnh thông số cho phù hợp.
- Sau khi chỉnh sửa xong bạn lưu mẫu.
Bước 4: Vào bố cục và thêm 1 tiện ích HTML/javascript rồi dán đoạn code bên dưới vào
<div class='domtab'><ul class='domtabs'>
<li><a href='#noidung1'>Nội dung 1</a></li>
<li><a href='#noidung2'>Nội dung 2</a></li>
<li><a href='#noidung3'>Nội dung3</a></li>
</ul>
<div style='padding:3px; border: 2px solid #ccc;'>
<a id='noidung1' name='noidung1'></a>
<div class='tab_content_1'>
Nội dung 1
</div></div>
<div style='padding:3px;display:none;border: 2px solid #ccc;'>
<a id='noidung2' name='noidung2'></a>
<div class='tab_content_2'>
Nội dung 2
</div></div>
<div style='padding:3px;display:none;border: 2px solid #ccc;'>
<a id='noidung3' name='noidung3'></a>
<div class='tab_content_3'>
Nội dung 3
</div></div>
</div>
Chú ý
- Các dòng chữ màu đỏ phải là giống nhau tương ứng ở từng nội dung
- Thay các dòng màu xanh đậm thành tên mục mà bạn muốn tạo
- Những dòng màu hồng là phần chứa nội bài viết ứng với từng thư mục
- Có thể thêm nhiều hơn 3 tab nội dung ở 1 bài viết
Chúc bạn thành công!
Không có nhận xét nào: