Tạo Tab nội dung 1

Đây là một Tab đa tập lệnh cho phép bạn tổ chức thường xuyên nội dung blog (WEB) vào một thẻ giao diện, với nội dung mong muốn xuất hiện khi nhấn vào tab đó, với việc này bạn có thể tiết kiệm không gian của blog(web) của bạn. Code sử dụng CSS và Javascript, và code còn hỗ trợ tính năng thẻ tab được chọn mặc định, tự động chuyển sang thẻ khác với thời gian được chọn sẵn.

Việc còn lại của bạn là Edit Layout -> Add widget/HTML -> Dán code này vào -> chỉnh sửa tùy ý

<style type="text/css">
.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(http://www.dynamicdrive.com/dynamicindex17/tabcontent/shade.gif) top left repeat-x;
}


.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li a.selected{
position: relative;
top: 1px;
}

.shadetabs li a.selected{
background-image: url(http://www.dynamicdrive.com/dynamicindex17/tabcontent/shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li a.selected:hover{
text-decoration: none;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

</style>

<script type="text/javascript" src="http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js">
</script>

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li> // l&#7879;nhclass="selected" &#273;&#7875; thi&#7871;t l&#7853;p Tab nào &#273;u&#7907;c ch&#7885;n m&#7863;c &#273;&#7883;nh hi&#7875;n th&#7883; khi load trang.

<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">
Tab content 1 here
</div>

<div id="country2" class="tabcontent">
Tab content 2 here
</div>

<div id="country3" class="tabcontent">
Tab content 3 here
</div>


<div id="country4" class="tabcontent">
Tab content 4 here
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link")
countries.init(2000) // &#273;&#7883;nh th&#7901;i gian t&#7921; chuy&#7875;n sang tab (ms), &#7903; &#273;ây là 2s, n&#7871;u không mu&#7889;n thì &#273;&#7875; tr&#7889;ng

</script>