[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot (phần 3) - navbar

     Sau hai bài tut+ trước, mình đã chỉ cho các bạn những bước đầu tiên cơ bản để làm một web blog, trong bài này thì mình sẽ chỉ các bạn cách tạo một navbar cho web, có rất nhiều kiểu menu như: menu dọc, menu ngang, dropdown, vertical menu,...Và việc chọn lựa mẫu nav là ở bạn, các bạn có thể tham khảo thêm trên mạng hoặc vào trang: http://cssmenumaker.com/, trang này có đủ các loại menu, chỉ cái không được đẹp lắm, các bạn mạng về code thêm css sẽ đẹp thôi còn hôm nay, mình chỉ hướng dẫn cách tạo menu trong blog thôi.

[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 4 ) - main-post
[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 2 )

     Trước tiên, các bạn cần xóa cái thanh tiêu đề đi, cái này bạn sẽ làm lại trong phần nav: logo bên trái và bên phải là thanh nav. Các bạn vào "Chỉnh sửa HTML", bấm "ctrl F" và tìm kiếm thẻ <header>...</header>, các bạn xóa tất cả đi thay vào bằng code nav của bạn, ví dụ như code sau:
<header>
<h1>nad blog</h1>
</header>

<nav class="navbar">
<ul>
<li><a href="#" class="active">HOME</a></li>
<li><a href="#">LINK TWO</a></li>
<li><a href="#">LINK THREE</a></li>
<li><a href="#">LINK FOUR</a></li>
<li><a href="#">LINK FIVE</a></li>
<li><a href="#">LINK SIX</a></li>
<li><a href="#">LINK SEVEN</a></li>
</ul>
</nav>

Và đây là CSS của em nó, các bạn thay vào phần ".header":

header {
height: 60px;
position: relative;
}
header h1 {
color: #9aa6af;
text-align: left;
font-size: 27px;
line-height: 60px;
font-weight: bold;
padding-left: 20px;
}

.nav {
position: absolute;
float: left;
padding: 10px;
top: 4px;
left: 10px;

display: none;
}
.nav li {
width: 30px;
height: 4px;
background-color: #fff;
border-radius: 3px;
margin: 5px 0;
}
nav {
position: absolute;
top: 0;
right: 5px;
}
nav li {
float: left;
display: inline-block;
}
nav li a {
font-size: 11px;
color: #9aa6af;
padding: 24px 15px;
text-decoration: none;
display: block;
}
nav li a:hover {color: #000;}

Vậy là ok, vì mỗi blog mỗi khác và code cũng không giống nhau nên dẫn đến việc lệch hay hiển thị sai vị trí, để giải quyết vấn đề này mình xin mạo muội chỉ các bạn cách sau: Các bạn mở trình duyệt lên Chorme hay FireFox là tốt nhất, bấm chuột phải, chọn cái cuối cùng là "Kiểm tra phần tử", click vào biểu tượng kính lúp với chorme và hình mũi tên với firefox ở góc trên bên trái:

   
Sau đó, bạn trỏ vào phần muốn chỉnh sửa, code CSS ở bên phải, bạn cứ thoải mái xóa, sửa, thêm code đến khi vừa ý thì thôi, nếu có lỡ tay chữa lợn lành thành lợn què mà không nỡ load lại vì trước đó bạn đã chỉnh sửa được vài thứ rồi thì chỉ cần "Ctrl + Z" là xong. Đó là chút mẹo của riêng mình, các bạn đừng cười nhé. Xong rồi thì bạn chỉ cần copy và thay code đó vào blog thôi.

Tới đây mình xin phép được kết thúc, chúc các bạn thành công và đón đọc phần 4 nhé!