"Tạo menu giống trang hacktutors.info"

(Traidatmui.com) – Theo yêu cầu của MrLive09 thì mình sẽ giới thiệu đến các bạn cách làm menu giống như trang hacktutors.info. Menu này không có phần menu con (submenu), vì vậy việc thực hiện nó rất đơn giản. Ở đây chỉ sử dụng css là có thể tạo được vì vậy nó không đòi hỏi kỹ thuật cao. Nếu bạn thấy thích thú với menu dạng này thì có thể thực hiện theo một số bước đơn giản sau.

1. Đăng nhập vào tài khoản Blogger
2. Vào thiết kế, chọn chỉnh sửa HTML
3. Chèn code bên dưới vào trước thẻ ]]></b:skin>

#category_menu_container {
height: 25px; /*chiều cao của menu*/
width: 650px; /*độ rộng của menu*/
background: #4488dd; /*màu nền của menu*/
margin-top:0px;}

#category_menu, #category_menu ul {
padding: 0; margin: 0;
list-style: none; line-height: 1;}
#category_menu ul {
float: left;
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0px;}
#category_menu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;}
#category_menu ul li {
list-style: none;
margin: 0px; padding: 0px;}
#category_menu li p {
color: #fff; display: block;
margin: 3px 3px 0px 3px;
padding: 5px 10px 5px 10px;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
font-size: 11px; font-family: Arial, Helvetica, sans-serif;}

#category_menu li a, #category_menu li a:link {
color: #fff; /*màu text*/
display: block;
margin: 3px 3px 0px 3px;
padding: 5px 10px 5px 10px;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
font-size: 11px; /*cở chữ*/
font-family: Arial, Helvetica, sans-serif;}
#category_menu li a:hover {
background: #3366a6;
color: #FFFFFF; /*màu text khi rê chuột*/
display: block;
margin: 3px 3px 0px 3px;
padding: 5px 10px 5px 10px;
text-decoration: none;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
}

4. Save template lại và trở về phần tử trang
5. Thêm 1 HTML/Javascript và thêm code sau vào nó

<div id='category_menu_container'>
<ul id='category_menu'>
<li><a href='url menu 1'><span>Menu 1</span></a></li>
<li><a href='url menu 2'><span>Menu 2</span></a></li>
<li><a href='url menu 3'><span>Menu 3</span></a></li>
<li><a href='url menu 4'><span>Menu 4</span></a></li>
<li><a href='url menu 5'><span>Menu 5</span></a></li>
<li><a href='url menu 6'><span>Menu 6</span></a></li>
<li><a href='url menu 7'><span>Menu 7</span></a></li>
<li><a href='url menu 8'><span>Menu 8</span></a></li>
<li><a href='url menu 9'><span>Menu 9</span></a></li>
<li><a href='url menu 10'><span>Menu 10</span></a></li>
</ul>
</div>

Chỉnh code:
- Bạn hãy thay các dòng màu xanh đậm thành tên của các thư mục
- Và thay dòng màu đỏ thành link tương ứng với từng thư mục

6. Save lại và tìm vị trí đặt phù hợp

Chúc bạn thành công