Tạo menu dọc cho blog

Đăng bởi Admin | 6/7/13 | 0 nhận xét

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:

Demo for Post

Hình minh họa.

» 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!

* Xem thêm:

• Tạo Menu xổ dọc với 2 cột sub cho blog
• Tạo Menu xổ nhiều cấp giống facebook cho blog
• Tạo Dropmenu đa cấp từ CSS3 và icon
• Tạo Dropmenu xổ dọc theo cột cho blogspot
• Tạo Colume Dropmenu có Search cho blogspot
• Tạo menu đổ xuống cho nhãn (drop down menu for label)
• Tạo menu Drop Down đơn giản
• Tạo menu đẹp đặt tại Sidebar cho blog

                                                                                                                 Theo: Namkna

                                                                                                                 Thu thuat vi tinh