Trong bài viết này mình sẽ hướng dẫn các bạn cách làm label tabs. Vậy Label Tabs là gì? Công dụng nó là để làm gì? Mời các bạn xem hình sau thì sẽ rõ:
Như hình vẽ, label tab là những label(nhãn) được đặt lên trên với những nút(button) có đường link tới label(nhãn) đó.Vậy là bạn đã biết thế nào là Label Tabs rồi đó. Bây giờ mình sẽ hướng dẫn cách làm nó như thế nào.
Bước 1: Vào Template>>Edit HTML tìm và sửa đoạn code sau:
Tại class='header' bạn sửa maxwidgets='2' và showaddelement='yes'. Nhấn nút Save.Bước 2: Bước này chúng ta sẽ copy đoạn code cho các nút tab (xem minh họa). Các tab này điều có tên và mõi tên tab sẽ tương ứng với các đoạn code sau đây(nhấp vào link down về). Các bạn xem hình minh họa rồi chọn cho mình một tab ứng ý sao đó copy đoạn code nào có tên tab tương ứng với tab bạn chọn vào notepad.
Ví dụ mình chọn tab F
/*- Menu Tabs F ------*/
#tabsF {
float:left;
width:100%;
font-size:80%;
line-height:normal;
border-bottom:1px solid #000;
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url(" http://www.yourwebsite.com/labeltabs/tableftF.gif")
no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url(" http://www.yourwebsite.com/labeltabs/tabrightF.gif")
no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}
Bước 3: Bạn tải về và giải nén file có đường link sau:
http://exploding-boy.com/images/CSSmenus.zip
Đây là file chứa các nút, các image mà ta sẽ sử dụng cho các tab của chúng ta. Bạn hãy nhấp vào đường link dưới để xem các tab mẫu:
http://exploding-boy.com/images/cssmenus/menus.html#
Mở file vừa mới giải nén xong và up lên host của bạn 2 file là tableftF.gif và tabrightF.gif
Bây giờ bạn lấy đường link của tableftF.gif thay thế cho đường link http://duonglink/tableftF.gif . Và đường link của tabrightF.gif thay thế cho đường link http://duonglink/tabrightF.gif ở đoạn code được tô đen bên dưới.
/*- Menu Tabs F ------*/
#tabsF {
float:left;
width:100%;
font-size:80%;
line-height:normal;
border-bottom:1px solid #000;
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url(" http://duonglink/tableftF.gif")
no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url(" http://duonglink/tabrightF.gif")
no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}
Sau đó bạn vào Template/Edit HTML, Copy đoạn code này vào trước chữ ]]></b:skin>
và Save lại.
Bước 4: Bạn tick chọn vào ô " Expand Widget Templates" tiếng việt là Mở Rộng Mẫu gì đó ở ngay trên khung code. Tìm đoạn code sau đây:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
.......copy code bỏ vào đây.....
</b:section>
</div>
Sau đó copy đoạn code sau và paste vào đoạn ".......copy code bỏ vào đây....." trên.
<b:widget id='Label10' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>
Chú ý ngay chổ id='tabsF'. Ở đây mình sử dụng Tab có tên là F nên id='tabsF'. Nếu bạn sử dụng Tab có tên là A thì id mình phải đổi là id='tabsA'.
Tới đây bạn Save Template lại lần nữa. Và quạy lại trang blog của mình nhấn F5 để xem kết quả thế nào.
Chúc bạn thành công!
