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.

- 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
- Feedburner Google và cách lấy tùy chỉnh cho blogspot
- Tiện ích Popular Posts - Bài xem nhiều với CSS3
- Mạng xã hội theo dõi với hiệu ứng rê chuột cho blogspot
- Mudim - Thêm bộ gõ tiếng Việt cho blogspot
- Hiệu ứng màu chạy lấp lánh trong chữ cho blogspot
- Thủ thuật thêm "comment mới gần đây nhất" cho blogspot
- Template dịch vụ, công ty giới thiệu cho blogspot
- Thủ thuật tạo khung liên kết thanh cuộn cho blogspot
- Nút điều khiển lên xuống toàn trang cho blogspot
Comments[ 0 ]
Đăng nhận xét