2 thg 9, 2007

Label Tabs

DangLVH
chú ý: bấm giữ phím Shift và click vào các hình bên dưới để xem hình rõ hơn

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'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
Vậy đoạn code mình chọn sẽ là:

/*- 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.

Vd:

/*- 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 mừng bạn đã hoàn thành xong một hack mới cho blog!
Chúc bạn thành công!


About the Author

DangLVH / Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

3 comments:

  1. Chết chết, Đăng hướng dẩn vầy là tiêu cái NEO rồi, muốn đưa cái label lên trên luôn thì sao xài NEO được? Đăng thay cái code cuối cùng đi.
    Hixhix, YHT định hack cái label này khác xíu mà đang loay hoay mấy dấu đóng ngoặc, tí coi tiếp mới được

    Trả lờiXóa
  2. cái này là em chỉ chung cho tất cả các blog đó. em sẽ có một bài riêng nữa để hướng dẫn bên NEO. Em đang viết nè.

    Trả lờiXóa
  3. ụa mà YHT muốn hack gì nữa vậy, nói cho em nghe ý tưởng cho em hack với, mà dấu ngoặc nào mà làm YHT loay hoay vậy. Sáng giờ em cũng loay và hoay với cái vụ khi bấm vào link bất kỳ ngoài mục recent post thì nó hiện nội dung bài viết lên chứ ko load cả trang.

    Trả lờiXóa

Recent Posts

Posts

Popular Posts