Thứ Sáu, 4 tháng 11, 2011

Tạo menu ngang cho Blog

Để thu hút khách thăm Blog thì ngoài load nhanh Blog của bạn phải có cấu tạo gọn nhẹ, đẹp mắt. Cách được sử dụng phổ biến hiện nay là tạo các Menu ngang trên đầu hoặc dưới chân blog để Blog có cấu tạo đẹp hơn và bắt mắt hơn. Sau đây mình xin hướng dẫn các bạn tạo một Menu dang như thế
Để tạo menu ngang cho Blogger như hình mẫu dưới đây





Đầu tiên bạn đăng nhập vào Blogger của mình rồi chọn Thiết kế > thêm tiện ích và chọn HTML/Javacript, sau đó dán code này vào:

<style>
 #navcontainer { /* none  needed */ } ul#navlist { margin: 0; padding: 
0; list-style-type: none;  white-space: nowrap; } ul#navlist li { float:
 left; font-family:  verdana, arial, sans-serif; font-size: 9px; 
font-weight: bold; margin:  0; padding: 5px 0 4px 0; background-color: #3535c7;
  border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; }  
#navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px;  
color: #ff0000; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active
 { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #0000ff; background-color:
 #1e5508; } </style> <div id="navcontainer"> <ul id="navlist">
<li><a href="http://namkna.blogspot.com/"><span>TRANG CHỦ</span></a></li>
 <li><a href="Link liên kết tới bài viết hoặc Laber của bạn"><span>GIẢI ĐÁP</span></a></li>
 <li><a href="Link liên kết tới bài viết hoặc Laber của bạn"><span>DOWNLOAD</span></a></li> <li><a href="Link liên kết tới bài viết hoặc Laber của bạn"><span>PHOTOSHOP</span></a></li>
 <li><a href="Link liên kết tới bài viết hoặc Laber của bạn"><span>CÀI ĐẶT WIN-GHOST</span></a></li>
<li><a href="Link liên kết tới bài viết hoặc Laber của bạn"><span>VUI ĐỂ HỌC</span></a></li>
 <li><a href="Link liên kết tới bài viết hoặc Laber của bạn"><span>WEB HAY</span></a></li> <li><a href="Link liên kết tới bài viết hoặc Laber của bạn"><span>NAMKNA</span></a></li>

Bây giờ, bạn hãy thay đổi các link màu đỏ bằng các link của Blog mình, bạn đặt tên cho các chữ màu vàng bằng các tên mà mình muốn hiển thị
Ngoài ra nếu muốn thay đổi màu chữ, màu nền cho menu các bạn thay đổi các code màu xanh.(xem bài cách lấy mã màu TẠI ĐÂY hoặc TẠI ĐÂY) . Nếu mẫu trên chưa vừa ý với bạn, bạn có thể xem thêm các mẫu menu ngang TẠI ĐÂY
Cuối cùng bạn di chuyển tiện ích HTML/Javacript này nằm dưới thanh tiêu đề của Blog để tạo menu ngang giống như các trang Web.
Mách nhỏ: Nếu muốn có các đường Link của các trang trên Blog mình thì bạn phải tạo thêm trang cho Blog (xem hướng dẫn TẠI ĐÂY), sau khi thêm trang xong bạn viết bài vào trang đó và cho ẩn các trang, lấy đường link đó thay vào các code màu đỏ... lúc này khách tham quan bấm vào một mục nào đó trên thanh menu thì sẽ hiện lên trang của bạn đã tạo...
Còn các bài viết theo chủ đề (Nhãn) thì bạn nên tạo hộp menu xổ xuống thì đẹp và gọn hơn (xem hương dẫn TẠI ĐÂY)


Chúc các bạn có một menu đẹp cho blog của mình!

Không có nhận xét nào:

Đăng nhận xét