TẠO MENU DỌC CHO BLOGSPOT

..Posted by T2KT at 22:32 ..

Menu điều hướng theo chiều dọc được đặt trên các sidebar trái hoặc phải rất hữu ích, giúp cho người đọc dễ dàng truy cập tới các chủ đề đáng lưu ý. Tùy theo màu sắc và bố cục của Blog bạn có thể tùy chọn cho mình một trong bộ sưu tập 20 menu điều hướng dọc dưới đây.

VnBlognet [dot] com: Đây là tuyển tập 20 menu dọc được mybloggertricks sửa đổi các mã của Christopher và Highdots làm chúng thích hợp với Blogger.

Dưới đây là hướng dẫn các bạn thực hiện tạo Menu điều hướng dọc, các bạn đọc kỹ hướng dẫn và xem xét đủ 25 mẫu để chọn cho mình một Menu ưng ý.
Tất cả 25 mẫu menu điều hướng đều sử dụng hai phần mã code riêng biệt: (1) Mã CSS để định nghĩa code về giao diện của menu, (2) Mã HTML để đặt menu tại vị trí trên Blog.
Truy cập vào Blogger:
- Truy cập vào Blogger Bảng điều khiển (Dashboard) >> Bố cục (Layout)   >>  Chỉnh sửa HTML (Edit HTML).
Nhớ sao lưu blog trước khi thực hiện các bước tiếp theo.
Chèn mã CSS:
- Tìm (Ctrl – F) đoạn mã  ]]></b:skin>
- Chèn đoạn code CSS của một trong 25 menu tương ứng lên phía trên mã ]]></b:skin>
- Lưu (Save) mẫu.
Chèn mã HTML:
- Vào Phần tử Trang ( Page Elements) >> Thêm Tiện ích (Add a Gadget) >>  HTML/Javascript và dán đoạn mã HTML vào phần nội dung.
Chỉnh sửa các link liên kết trong menu:
- Sau khi đã thực hiện xong các bước 2 và 3, bạn cần chỉnh lại link liên kết hiển thị trong đoạn mã HTML.
- Thay thế các tiêu đề và đường link của các menu bạn chỉ cần thay đổi các dòng in đậm trọng đoạn code như dưới:

<li><a href="#1" >Link 1</a></li>
<li><a href="#2" >Link 2</a></li>
<li><a href="#3" >Link 3</a></li>
<li><a href="#4" >Link 4</a></li>
<li><a href="#5" >Link5</a></li>

- Thay thế #1, #2, #3 etc bằng các địa chỉ Page Links/URL và thay thế Link1, Link2, Link3 etc bằng Tên các page Page. Ví dụ với Các bài viết về Bài viết trong blogger trên vnblognet.com sẽ như sau:

<li><a href="http://www.thuthuatkiemtien.tk/label/Post" >Bài viết</a></li>

- Nếu cần thêm hay xóa đi các tab (link) bạn chỉ cần thêm hoặc xóa đi đoạn code HTML dưới:

<li><a href="#" >Link</a></li>

Các mẫu menu:
- Live Demo – Xem mẫu
- Danh mục Menu 1:

CSS CODE:

#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj960zPIPNLeG1Fdv_gCwL6QyvCAuJdqMXbPdS1lQHIzYkayh0YHmE05VNQhtk9P3oz95z6W8yiCThuxVUDshslCvufgwatSdRO16vJS2lZP0-29DLnAKY8NFhVBvC9Qu-odQZxASOHR1Q/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj960zPIPNLeG1Fdv_gCwL6QyvCAuJdqMXbPdS1lQHIzYkayh0YHmE05VNQhtk9P3oz95z6W8yiCThuxVUDshslCvufgwatSdRO16vJS2lZP0-29DLnAKY8NFhVBvC9Qu-odQZxASOHR1Q/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }

HTML CODE:

<div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

- Danh mục Menu 2:

CSS CODE:

#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3zug_woAg6nQENQetqhDUjmJs6lFVdXvSfCS_Nt-USnqBmEZsjtInqS95_4vTZdIvvg51VM5cNFve_plhWi1y81tAZsrB0rCMzcXeTbSk0rIgplUROHv9nsEs4sQN1Mz7fmDEtQY9oW8/s800/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3zug_woAg6nQENQetqhDUjmJs6lFVdXvSfCS_Nt-USnqBmEZsjtInqS95_4vTZdIvvg51VM5cNFve_plhWi1y81tAZsrB0rCMzcXeTbSk0rIgplUROHv9nsEs4sQN1Mz7fmDEtQY9oW8/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }

HTML CODE:

<div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Danh mục Menu 3:

CSS CODE:

#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE0gacNnb2WaJlMJsY3CGKhXpUaAzdlqgSsuTuNjb4-HEHKveIV5RAIlP9g38s0xDZXAOKp47wt_XQ1EzXQiaqaW0gWIJbxvvK3MZObivXfjPOdvgsjAIt2cbpdIefEXdp9I0m3xn8mxA/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE0gacNnb2WaJlMJsY3CGKhXpUaAzdlqgSsuTuNjb4-HEHKveIV5RAIlP9g38s0xDZXAOKp47wt_XQ1EzXQiaqaW0gWIJbxvvK3MZObivXfjPOdvgsjAIt2cbpdIefEXdp9I0m3xn8mxA/s800/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }

HTML CODE:

<div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

- Danh mục Menu 4:

CSS CODE:

#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmb1UHZfZeobx9hlnloHssM3knqvMuYQmgUH2HFmeOpOdLVDn3sTdfIGhzbgQ-q0A1q8ZDT-4pg-P38SJsc4spxQu0c_iVI7Sn4ja51TKvYXy5ihc4ZpSbxoW5pylVsWCjd5FOSGqv9O8/s800/menu6.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmb1UHZfZeobx9hlnloHssM3knqvMuYQmgUH2HFmeOpOdLVDn3sTdfIGhzbgQ-q0A1q8ZDT-4pg-P38SJsc4spxQu0c_iVI7Sn4ja51TKvYXy5ihc4ZpSbxoW5pylVsWCjd5FOSGqv9O8/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }

HTML CODE:

<div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Danh mục Menu 5:

CSS CODE:

#menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-VDEUR9OoQuTLMTsVlh28RIWkJoGDgTYynA-0VduhzDC1fpYhi67k2tmGzxsFYt9RLO5gFwb7KQqgPNhAea1MKh0FObjCWLsVbRFa7dGTPBVZJ00of9nn90T3P9-WfYbVE1Ry7qpItx8/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-VDEUR9OoQuTLMTsVlh28RIWkJoGDgTYynA-0VduhzDC1fpYhi67k2tmGzxsFYt9RLO5gFwb7KQqgPNhAea1MKh0FObjCWLsVbRFa7dGTPBVZJ00of9nn90T3P9-WfYbVE1Ry7qpItx8/s800/menu14.gif); padding: 8px 0 0 10px; }

HTML CODE:

<div id="menu14"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>