Tạo Menu Tab cho blogger

Để blog của mình pro và chuyên nghiệp hơn, hôm này mình hướng dẫn các bạn làm cái Menu Tab cho blogger (theo yêu cầu của một số bạn khi tham khảo tại blog của mình). Trước tiên mình xin giới thiệu Menu Tab là gì để các bạn hiểu rõ hơn, Menu Tab là những cái label (nhãn) được đặt lên những button có đường link tới những bài viết có label đó. (tên label được đặt khi các bạn đăng bài). Sau đây mình sẽ hướng dẫn cách làm Menu Tab nhé!
Trước khi làm các bạn nhớ save mẫu lại, bằng cách click vào Tải mẫu đầy đủ. Để bảo toàn template cho các bạn nếu như các bạn làm sai.

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: Chọn loại Menu Tab cho blog của mình click here. 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 click here để download. Sau đó dùng notepad mở file này ra và copy đoạn code tương ứng với tên Menu Tab mình đã chọn ra notepad. Ví dụ mình chọn Tab C thì đoạn code của mình sẽ là:

/*- Menu Tabs C--------------------------- */

#tabsC {
float:left;
width:100%;
background:#EDF7E7;
font-size:93%;
line-height:normal;
}

#tabsC ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}

#tabsC li {
display:inline;
margin:0;
padding:0;
}

#tabsC a {
float:left;
background:url("http://www.yourwebsite.com/labeltabs/tableftC.gif")
no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;

}

#tabsC a span {
float:left;
display:block;
background:url("http://www.yourwebsite.com/labeltabs/tabrightC.gif")
no-repeat right top;
padding:5px 15px 4px 6px;
color:#464E42;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#tabsC a span {float:none;}

/* End IE5-Mac hack */

#tabsC a:hover span {
color:#FFF;
}

#tabsC a:hover {
background-position:0% -42px;
}

#tabsC a:hover span {
background-position:100% -42px;
}

Bước 3: Các bạn click here download và giải nén file chứa các image button sử dụng cho các Menu Tab. Sau đó mở file vửa mới giải nén và up lên host 2 image button tab mà bạn đã chọn. Ví dụ Menu Tab của mình là C thì mình up 2 file là tableftC.gif và tabrightC.gif.
Bây giờ bạn vào notepad sửa lại đường dẫn tới 2 file này. Ví dụ:
....
background:url("http://anhchangsitinh19862001.googlepages.com/tableftC.gif")
....
background:url("http://anhchangsitinh19862001.googlepages.com/tabrightC.gif")
.....
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 click chọn vào ô " Expand Widget Templates" tiếng việt là Mở Rộng tiện ích gì đó ở ngay trên khung code. Tìm đoạn code sau đây:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
.......Paste vao day.....
</b:section>

</div>

Sau đó copy đoạn code sau và paste vào chổ ".......Paste vao day....." ở trên.

<b:widget id='Label10' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsC'>
<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='tabsC'. Ở đây mình sử dụng Tab có tên là C nên id='tabsC'. 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! Làm xong nhớ comment cho bài viết của mình nhé!