Chủ Nhật, 20 tháng 5, 2012

DỌC CÁCH


Tạo menu dọc cho blogger

Fairstar | 18-05-2011 | nhận xét (35)
Tạo menu dọc cho blogger - http://namkna.blogspot.com/
Trong thiết kế blog thì việc sắp xép các laber chủ đề cho blogspot là rất quan trọng. Việc sắp sép của bạn nhìn sẽ hợp lý và đẹp hơn thay vì sử dụng các thanh menu laber có sẵn của blogspot. Namkna đã từng giới thiệu cho các bạn rất nhiều mẫu menu dọc đẹp, nếu thích bạn có thể xem lại tại đây. Hôm nay namkna sẽ giới thiệu cho các bạn thêm một mẫu menu mới.
Các bạn có thể xem Demo:


Hình minh họa.
Tạo menu dọc cho blogger - http://namkna.blogspot.com/

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn Chỉnh sửa HTML 

4. Thêm đoạn mã trước đây trước thẻ ]]></b:skin>:
#navcontainer { background: #666666;  width: 100%; margin: 0 auto; padding:0em 0; font-family: georgia,  serif; font-size: 15px; text-align: center; text-transform: uppercase; }
ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0  auto; width: 100%; }
ul#navlist li { display: block; margin: 0; padding:  0; }
ul#navlist li a { display: block; width: 100%; padding: 1em 0 1em  1em; border-width: 2px; border-color: #ffe #aaab9c #ccc #fff;  border-style: solid; color: #777; text-decoration: none; background: #000000; }
#navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; }
ul#navlist li a:hover, ul#navlist li#active a:hover { color: #0bd500; background: #2c7f0c; border-color: #aaab9c #fff #fff #ccc; }
Trong đó:
  • background: #666666 là màu của Menu. Nếu muốn đổi màu khác bạn thay mã mày là dduwwocj. Xem các mã màu tại đây hoặc tại đây.
  • Nếu muốn chữ viết trên menu dạng in thường thay vì in hoa như Demo thì bạn xóa ddaonj code màu xanh sau: text-transform: uppercase;
5.   Bấm Lưu mẫu lại.
6: Bạn quay lại Thiết kế > thêm Tiện ích > chọn  thêm HTML/Javacrip và dán đoạn code bên dưới vào:
<div id="navcontainer">
<ul id="navlist">
<li><a href="Link URL">Tên hiển thị 1</a></li>
<li><a href="Link URL">Tên hiển thị 2</a></li>
<li><a href="Link URL">Tên hiển thị 3</a></li>
<li><a href="Link URL">Tên hiển thị 4</a></li>
<li><a href="Link URL">Tên hiển thị 5</a></li>
</ul>
</div>
Trong đó: 
  • Thay thế các Link URL thành URL (địa chỉ liên kết) của các nhãn hoặc bài đăng.
  • Thay các tên hiển thị 1 - 5 thành tên nhãn hoặc bài viết (Không nên đặt quá dài nha).
7. sau đó bấm LƯU
Bây giờ quay lại vào Blog bạn sẽ thấy một menu dọc tuyệt đẹp xuất hiện trên Blog của mình. Xem thêm style khác Tại đây
Chúc thành công!

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

Đăng nhận xét

Support : Guide | Blogspot Tips | Television | IDM | Software Free | Site Map | Back Link | Contact | ↑ back to top
Ghi rõ nguồn namkna.blogspot.com khi phát hành lại thông tin từ trang này
Copyright © 2011. MENU - All Rights Reserved
Design by Namkna Edit Namkna
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Six million namkna template bynamkna