Hình ảnh minh họa
» Bắt đầu thủ thuật1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (hay bố cục)
3. Chọn chỉnh sửa HTML
4. Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>
.pageTabs {
margin: 10px auto 0;
font-size:11px;}
ul.tabs {
margin: 0;
padding: 0 ;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0; /* màu nền của các Tabs*/
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #eff0f1;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #eff0f1;
border-bottom: 1px solid #eff0f1;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%; /* độ rộng của phần nội dung các Tabs*/
color:#000;
background: #eff0f1; /* màu nền của phần nội dung các Tabs*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
padding: 5px;
font-size: 1.2em;
}
.tab_content img {
float: left;
margin: 10px 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
.tab_content p{
padding-bottom:10px;
}
margin: 10px auto 0;
font-size:11px;}
ul.tabs {
margin: 0;
padding: 0 ;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
background: #e0e0e0; /* màu nền của các Tabs*/
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #eff0f1;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #eff0f1;
border-bottom: 1px solid #eff0f1;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%; /* độ rộng của phần nội dung các Tabs*/
color:#000;
background: #eff0f1; /* màu nền của phần nội dung các Tabs*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
padding: 5px;
font-size: 1.2em;
}
.tab_content img {
float: left;
margin: 10px 20px 20px 0;
border: 1px solid #ddd;
padding: 5px;
}
.tab_content p{
padding-bottom:10px;
}
5. Chèn tiếp code bên dưới ngay sau thẻ <head>
<script src="http://traidatmui-tips.googlecode.com/files/Jquery1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){$(".tab_content").hide();$("ul.tabs li:first").addClass("active").show();$(".tab_content:first").show();$("ul.tabs li").click(function(){$("ul.tabs li").removeClass("active");$(this).addClass("active");$(".tab_content").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn(1000)})});
</script>
<script type="text/javascript">
$(document).ready(function(){$(".tab_content").hide();$("ul.tabs li:first").addClass("active").show();$(".tab_content:first").show();$("ul.tabs li").click(function(){$("ul.tabs li").removeClass("active");$(this).addClass("active");$(".tab_content").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn(1000)})});
</script>
6. Save template lại
7. Trở về phần tử trang và thêm 1 HTML/Javascript
8. Thêm vào phần tử HTML/Javascript code bên dưới
<ul class="tabs">
<li><a href="#tab1">TAB1</a></li>
<li><a href="#tab2">TAB2</a></li>
<li><a href="#tab3">TAB3</a></li>
<li><a href="#tab4">TAB4</a></li>
<li><a href="#tab5">TAB5</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
NỘI DUNG CỦA TAB 1
</div>
<div id="tab2" class="tab_content">
NỘI DUNG CỦA TAB 2
</div>
<div id="tab3" class="tab_content">
NỘI DUNG CỦA TAB 3
</div>
<div id="tab4" class="tab_content">
NỘI DUNG CỦA TAB 4
</div>
<div id="tab5" class="tab_content">
NỘI DUNG CỦA TAB 5
</div>
</div>
<li><a href="#tab1">TAB1</a></li>
<li><a href="#tab2">TAB2</a></li>
<li><a href="#tab3">TAB3</a></li>
<li><a href="#tab4">TAB4</a></li>
<li><a href="#tab5">TAB5</a></li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
NỘI DUNG CỦA TAB 1
</div>
<div id="tab2" class="tab_content">
NỘI DUNG CỦA TAB 2
</div>
<div id="tab3" class="tab_content">
NỘI DUNG CỦA TAB 3
</div>
<div id="tab4" class="tab_content">
NỘI DUNG CỦA TAB 4
</div>
<div id="tab5" class="tab_content">
NỘI DUNG CỦA TAB 5
</div>
</div>
» Chỉnh code:
- Bạn thay các tab màu đỏ thành tên hiển thị cho tiện ích của bạn.
- Các dòng màu xanh là nội dung hiển thị tương ứng với các Tab, bạnh ãy thay thành các tiện ích tương ứng với các tab.
9. Save tiện ích và tìm vị trí đặt cho phù hợp
Nguồn: traidatmui
0 nhận xét | Viết lời bình