Home » Thủ thuật blog
Tạo tab nội dung với CSS
Thứ Bảy, 9 tháng 5, 2009

Xem demo trực tiếp ở đây: http://fandung.110mb.com/CSS-tab/tab_menu.html
Xem hình minh họa :

☼ Đầu tiên chèn đọan code CSS này vào template của blog.
1. Đăng nhập blog
2. Vào bố cục(Layout)
3. Vào chỉnh sửa code HTML (Edit code HTML)
4. Chèn đọan code CSS bên dưới vào trên dòng ]]></b:skin>
html{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#bar a{
padding:4px 6px;
background:#E0E9FE;
text-decoration:none;
font-weight:bold;
}
#bar a:hover{
color:#003366;
}
#container{
background:#E0E9FE;
padding:10px;
}
div.maintab div {
display: none
}
div.maintab div:target {
display: block
}
5. Save template.
6. Tạo Widget HTML/Javascript và chèn code HTML bên dưới vào:
<div id="bar">
<a href="#tab1">Tab 1</a>
<a href="#tab2">Tab 2</a>
<a href="#tab3">Tab 3</a>
<a href="#tab4">Tab 4</a>
</div>
<div id="container">
<div class="maintab">
<div id="tab1">
Tab 1 Content
</div>
<div id="tab2">
Tab 2 Content
</div>
<div id="tab3">
Tab 3 Content
</div>
<div id="tab4">
Tab 4 Content
</div>
</div>
</div>
7. Save lại là xong.
Chúc các bạn thành công.

- Blogger chính thức add avatar vào comment feed
- Share 3 template bloger đẹp cho anh em
- 12 cách giảm thời gian load trang cho bloger
- Blogger Templates Vector Responsive
- Tạo iFrame YouTube Màu bạc
- Thêm tác giả, quyền Admin cho blogspot
- Hiển thị nhãn (label) phong cách màu tím cực nổi cho blogspot [V3]
- Thêm Google translate - dịch đa ngôn ngữ cho Blogspot
- Cài đặt theo dõi Google analytics cho blogspot
- Cách tạo khung Form đăng nhập cho blogspot
- Thêm chia sẻ Like và share bài viết cho blogspot [trên trang itviet360]
- Thêm nút theo dõi (Follow) cho blogspot
Comments[ 0 ]
Đăng nhận xét