"Tạo menu có hiệu ứng bằng hình ảnh"

Một trong những công cụ để phân loại ra các bài viết đó là tạo ra thanh menu (thực đơn) cho blog. Nó sẽ giúp cho đọc giả dễ dàng tìm kiếm nội dung trên blog hay web của bạn. Nó cũng cho biết blog hay web đó chứa những nội dung gì, liên quan đến lĩnh vực nào. Hôm nay mình xin chia sẽ cách tạo nên thanh menu với nhiếu phong cách đẹp mắt.

xem hình bên dưới

Đầu tiên bạn hãy download file ảnh của menu tại đây về và upload lên một trang chủ của bạn để lấy link. File ảnh trên có rất nhiều kiểu cho bạn chọn tùy theo ý thích của bạn.

☼ Bây giờ chúng ta bắt đầu vào công việc chính
1. Đăng nhập blog
2. Vào Bố cục (layout)
3. Tạo một Widget HTML/Javascript.
4. Chèn đọan code CSS bên dưới vào HTML/Javascript đó

<style>
#tabs {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;

}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("LINK OF tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("LINK OF tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */

#tabs a:hover span {
color:#FFF;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;}</style>

<div id="tabs">
<ul>
<li><a href="URL liên kết" title="Tên link 1"><span>Tên link 1</span></a></li>
<li><a href="URL liên kết" title="Tên link 2"><span>Tên link 2</span></a></li>
<li><a href="URL liên kết" title="Tên link 3"><span>Tên link 3</span></a></li>
<li><a href="URL liên kết" title="Tên link 4"><span>Tên link 4</span></a></li>
</ul>
</div>

Chú ý: thay code màu đỏ ở trên bằng link hình mà bạn vừa download về và upload lên trang chủ, nhớ fải đúng thứ tự các file. Nếu bạn chọn loại style menu nào thì phải chọn ảnh đồng loạt giống nhau. Ví dụ bạn chọn loại ảnh phong cách "E" thì phải chọn hai ảnh với tên là tableftE.gif và tabrightE và thay chúng vào đúng vị trí như trên.
- Khi bạn thay đổi ảnh (tức là không sử dụng những hình ảnh mình đưa) thì bạn phải chỉnh code màu xanh cho phù hợp với ảnh của bạn. Ở đây 42px chính là 1/2 chiều cao của ảnh.
- Hãy thay code màu xanh dương (URL liên kết) trên thành link mà bạn muốn dẫn đến. Ví dụ : http://www.traidatmui.com.
- Code màu xanh lá chính là tên hiển thị của link đó, bạn hãy thay chúng thành tên liên kết của bạn.
5. Cuối cùng save HTML/Javascript lại.