Tạo menu giống trang hacktutors.info

DEMO
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