Rất nhiều blogger sử dụng những thanh menu nằm ngang để giúp cho người đọc dễ dàng tìm kiếm thông tin mà họ muốn. Nhiều Template đã có sẵn những dạng menu này, nhưng thay đổi mầu sắc, kích cỡ như thế nào ? Hay có thể thay đổi các dòng chữ trên menu bằng các hình ảnh được không?
Trong bài viết này tôi sẽ đề cập tới những vấn đề đó.
1) Tạo một Navigation Bar đơn giản:(xem hình)
Bạn vào Edit HTML và nhớ là phải lưu mẫu trước. Trong bảng mã, bạn hãy tìm :
/* Header
và chèn đoạn mã dưới đây vào phía sau nó#Crazyboy ul li{
list-style-type: none;
display:inline;
margin:0px;
padding:30px;
border:0px solid;
}
Navigation Bar có thể được thay đổi vị trí thông qua mã margin và padding. Hãy đọc bài viết Tìm Hiểu Margin Và Padding
Bây giờ bạn cần tìm đoạn mã sau: <div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='ADSENSE TIPS ' type='Header'/>
</b:section>
</div>
(bạn cần lưu ý nội dung giữa 2 thẻ <div id='header-wrapper'> và </div> ở mỗi template là khác nhau nên bạn chỉ cần tìm đoạn mã có 2 thẻ trên là được)
và chèn ngay dưới nó đoạn mã sau:<div id='Crazyboy'>
<ul>
<li><a href="URL of Home page">Home</a></li>
<li><a href="URL of Home page">Music</a></li>
<li><a href="URL of Home page">Books</a></li>
<li><a href="URL of Home page">About Me</a></li>
<li><a href="mailto:EMAIL ADDRESS">Contact</a></li>
</ul></div>
Bạn có thể thay nhưng dòng mầu xanh, mầu đỏ và mầu tím. Dòng mầu đỏ là những chữ sẽ hiển thị trên Navigation Bar (thanh menu). Bạn thay thế dong mầu xanh bằng các đường link khác. Dòng mầu tím là địa chỉ mail của bạn.
2) Thêm hiệu ứng các hiệu ứng:
Bạn có thể thêm các hiệu ứng bằng cách chèn ngay dưới đoạn mã này:#Crazyboy ul li{
list-style-type: none;
display:inline;
margin:0px;
padding:30px;
border:0px solid;
}
đoạn mã sau:#Crazyboy li a{
color:#dfffed;
}
#Crazyboy li a:visited {
color: #57E964;
}
#Crazyboy li a:hover {
color: #F88017;
background: #ffff66;
}
Nếu muốn thay đổi mầu sắc, bạn tra mã mầu trong bảng mầu thập lục và thay thế vào các dong mầu vàng. Click vào đây để lấy bảng mã mầu thập lục.
Sau khi làm xong bạn sẽ thấy :
3) Chèn hình ảnh thay thế cho các chữ trên Navigation Bar:
Chỉ thay thế đoạn mã<div id='Crazyboy'>
<ul>
<li><a href="URL Home page">Home</a></li>
<li><a href="URL Music">Music</a></li>
<li><a href="URL Books">Books</a></li>
<li><a href="URL About">About Me</a></li>
<li><a href="mailto:EMAIL ADDRESS">Contact</a></li>
</ul></div>
bằng đoạn mã :<div id='Crazyboy'>
<ul>
<li><a href="URL Home page"><img src="URL image"/></a></li>
<li><a href="URL Music page"gt;<img src="URL image"/></a></li>
<li><a href="URL Books page"><img src="URL image"/></a></li>
<li><a href="URL Profile page"><img src="URL image"/></a></li>
<li><a href="mailto:EMAIL ADDRESS"><img src="URL image"/></a></li>
</ul></div>
Bạn thay thế dòng mầu xanh bằng các đường link đến các bài viết hoặc label, thay thế dòng mầu đỏ bằng các đường link đến hình ảnh.
Vậy là bạn đã có một Navigation Bar rồi đó.
Cám ơn các bạn đã theo dõi bài viết. Mong sẽ nhận được nhiều ý kiến đóng góp từ các bạn để giúp hoàn thiện nội dung bài viết hơn..
Chúc các bạn có 1 ngày vui vẻ!
No comments:
Post a Comment