1.2. Vào mẫu (template) => Chọn mục Chỉnh sửa HTML (Edit HTML).
1.3. Chèn đoạn code bên dưới vào trước thẻ đóng </head>
<script type='text/javascript'>
//<![CDATA[
function tabtampil_oom(TPID, id)
{
var Tabtampil = document.getElementById(TPID);
var TTs = Tabtampil.firstChild;
while (TTs.className != "TTs" ) TTs = TTs.nextSibling;
var TT = TTs.firstChild;
var i = 0;
do
{
if (TT.tagName == "A")
{
i++;
TT.href = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";
TT.className = (i == id) ? "Active" : "";
TT.blur();
}
}
while (TT = TT.nextSibling);
var Halamans = Tabtampil.firstChild;
while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
var Halaman = Halamans.firstChild;
var i = 0;
do
{
if (Halaman.className == 'Halaman')
{
i++;
if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
Halaman.style.overflow = "auto";
Halaman.style.display = (i == id) ? 'block' : 'none';
}
}
while (Halaman = Halaman.nextSibling);
}
function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);
}
function tabtampil_inisial(TPID) { tabtampil_oom(TPID, 1);
document.write('');}
//]]>
</script>
1.4. Lưu mẫu lại và tiến hành bước tiếp theo nha.
1.5. Bạn bấm vào tab Bố cục (Layout) => Bấm chọn Thêm tiện ích (Add widget) => Tại cửa sổ hiện lên bạn bấm chọn để tạo một tiện HTML\Javascripts và chèn vào đoạn code bên dưới vào phần nội dung của tiện ích đó:
<style type="text/css">
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #eee; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #fff; overflow: hidden; background-color:#ffffff;}
div.TabTampil div.Halamans div.Halaman
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #eee; border-right:1px solid #eee; border-top:1px solid #eee; border-bottom:0px solid #eee; float: left;
display:
block; width: 95px; text-align: center; vertical-align: middle; height:
24px; padding-top: 3px; text-decoration: none; font-family: "Arial",
Serif;
font-size: 11px; font-weight: 900; color: #000000}
</style>
<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 300px;" class="TTs"> <a>Tiêu đề Widget 1</a> <a>Tiêu đề Widget 2</a> <a>Tiêu đề Widget 3</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Nội dung Widget 1
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Nội dung Widget 2
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Nội dung Widget 3
</div>
</div>
</div>
</div>
</div></form>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>
Tùy chỉnh đoạn code trên:
- Trước khi đi vào chỉnh sửa chi tiết bạn hãy xem công cụ lấy mã màu sau Color conveter (công cụ này quan trong vì nó liên quan đến những chỉnh sửa mà sau đây mình hướng dẫn)
- #eee : là màu nền của Tabs, mặc định là màu xám
- #fff : là màu đường viền của tiện ích (ở đây mình để là màu trắng)
- #ffffff : là màu nền của thân widget
- #eee : là màu đường viền bao quanh Tabs
- #000000 : là màu chữ của tiêu đề Tabs
- Bạn có thể thay thế những phần màu đỏ thành tiêu đề của các tab, đây là phần hiển thị và khi bạn bấm vào đó nó sẽ hiển thị các nội dung khác nhau.
- Thay thế những phần màu cam thành nội dung, đây là phần sẽ ẩn đi hoặc hiện ra khi bạn bấm vào tiêu đề tab.
1.6. Giờ hãy lưu tiện ích lại và quay trở lại trang của bạn để xem thành quả bạn đã làm được nha.
