5 Kiểu Menu dọc cho Blogspot

Nguồn: Sưu tầm.
Hôm nay chán chán chả biết làm gì,  rãnh rỗi ngồi post bài chơi vui. Ai có hứng thì làm,  không thích mà vô tình đã ghé vô thì mấy bạn nên xem cho biết nha, cũng chả sao cả.
 Để tạo các Menu này các bạn làm như sau:

1. Đăng nhập Blogger > Thiết kế > Chỉnh sửa HTML.

2. Tất cả các Menu dưới đây gồm 2 phần là  CSS và HTML nên các bạn cứ làm theo mình nha.

3. Đối với code CSS bạn chèn vào trước thẻ  ]]></b:skin>.

4. Đối với code HTML , ta có 2 cách để chèn. Hai cách này thực ra chỉ là 2 kiểu chèn bên Trái và bên Phải thôi, chẳng có gì cả, chỉ phụ thuộc sidebar của bạn nằm bên nào thôi :

- Nếu sidebar nằm bên phải, bạn chèn code HTML dưới thẻ <div id='sidebar-wrapper'> hoặc thẻ <div id='sidebar-wrapper-right'>.

- Nếu sidebar nằm bên trái, bạn chèn code HTML dưới thẻ  <div id='sidebar-wrapper-left'>.

     Lưu ý:

Vì hầu hết các mẫu sử dụng mã hóa khác nhau do đó nếu bạn không thể tìm thấy các mã trên. Vì vậy bạn có thể tìm các thẻ tương tự với các từ khóa trong nháy kép.

5. Lưu Templates của bạn va xem kết quả Bạn đã thực hiện.

Và bạn cũng phải chỉnh sửa Link và Title trong Menu để đc hiển thị một cách chính xác trong đoạn code HTML.

<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" >Link 5</a></li>

Thay thế # 1, # 2, # 3...với  URL  trang của bạn và thaythế link1, link2, link3 ... với các tiêu đề trang của bạn. Nếu bạn muốn thêm hoặc xóa một tab sau đó chỉ cần thêm hoặc xóa các dòng này từ code HTML.

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

Đây là 5 kiểu Menu dọc :

Kiểu 1:
CSS code:

#menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu1 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; } #menu1 li a:link, #menu1 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUGS8pyNwzJGFsTJZzCwotmT5AUmzA7LnrtLuO9Eroa4lksRhIvHqtpiKudGLBOAKmI1FS-b5xqqQxNDp4LXj6SPutqVKmhs-dgDDSAnd-wC1KiPm1uJO4kH2syxVPqZ_1zUU5qVTa4-o/s1600/menu1.gif); padding: 8px 0 0 30px; } #menu1 li a:hover, #menu1 li #current, #menu1 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUGS8pyNwzJGFsTJZzCwotmT5AUmzA7LnrtLuO9Eroa4lksRhIvHqtpiKudGLBOAKmI1FS-b5xqqQxNDp4LXj6SPutqVKmhs-dgDDSAnd-wC1KiPm1uJO4kH2syxVPqZ_1zUU5qVTa4-o/s1600/menu1.gif) 0 -32px; padding: 8px 0 0 30px; }

HTML code:

<div id="menu1"> <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>

Kiểu 2: CSS code:

#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; } #menu2 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; } #menu2 li a:link, #menu2 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX3aUzzgIjyBh4J4yF5AhzVhk3OnYRGDqzus4It3MW2HFuZxXy8xXebjxynmxEoGk71qCBgWp4GmBMrbCBwcoffHkLtsYmEPg6H1BJyUlTNHo_mGK2YLIEtel1MlzZ7ABH44kH_cRqeWQ/s1600/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current, #menu2 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX3aUzzgIjyBh4J4yF5AhzVhk3OnYRGDqzus4It3MW2HFuZxXy8xXebjxynmxEoGk71qCBgWp4GmBMrbCBwcoffHkLtsYmEPg6H1BJyUlTNHo_mGK2YLIEtel1MlzZ7ABH44kH_cRqeWQ/s1600/menu2.gif) 0 -32px; padding: 8px 0 0 10px; }

HTML code:

<div id="menu2"> <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>

Kiểu 3:
CSS code:

#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #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: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiccBAW8w2FS3bzxEGHa6XtLb9dHWWoMPGDgLj-8mMBBwlbQkDNg1WpV5JM3JgumzoLJuZcbMAtDtWTJChnHvdA6tDH2fhic5yYK7SfDdOGmw5Njh6VrKtWiIlW_VaKpLJ-CEHTkXEVIdc/s1600/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiccBAW8w2FS3bzxEGHa6XtLb9dHWWoMPGDgLj-8mMBBwlbQkDNg1WpV5JM3JgumzoLJuZcbMAtDtWTJChnHvdA6tDH2fhic5yYK7SfDdOGmw5Njh6VrKtWiIlW_VaKpLJ-CEHTkXEVIdc/s1600/menu3.gif) 0 -32px; padding: 8px 0 0 32px; }

 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>

Kiểu 4:
CSS code:

#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; } #menu4 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; } #menu4 li a:link, #menu4 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWyGkvsUNukYCo4E6_2oiCgpucOqSJXV8Iba8UhqEq51eKBGefDMYBZA2QUey6JBIIPenMqL8SCsoaRsl31lneQzDehx9MzyiTXdPi5eNNGJmxAGrfmHvafo0Yqo6yWYETOsZhej59bQ/s1600/menu4.gif); padding: 8px 25px 0 10px; text-align: right; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWyGkvsUNukYCo4E6_2oiCgpucOqSJXV8Iba8UhqEq51eKBGefDMYBZA2QUey6JBIIPenMqL8SCsoaRsl31lneQzDehx9MzyiTXdPi5eNNGJmxAGrfmHvafo0Yqo6yWYETOsZhej59bQ/s1600/menu4.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvWyGkvsUNukYCo4E6_2oiCgpucOqSJXV8Iba8UhqEq51eKBGefDMYBZA2QUey6JBIIPenMqL8SCsoaRsl31lneQzDehx9MzyiTXdPi5eNNGJmxAGrfmHvafo0Yqo6yWYETOsZhej59bQ/s1600/menu4.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }

 HTML code:

<div id="menu4"> <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>

Kiểu 5:
CSS code:

#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 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; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgETRshrFeCqBsyTKuxCsIMZsQyjVfZLOvE9bVwjyaUmhGkotpTYS5k2qyDazkDSREThjhOZ-DNCZ1SNTNrixIw-R08aiogP5E2MLmIewOZ-nUIFD7rEb4d_KdaTA3pPB3AE3X4wVKs2U8/s1600/menu5.gif); padding: 8px 0 0 35px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgETRshrFeCqBsyTKuxCsIMZsQyjVfZLOvE9bVwjyaUmhGkotpTYS5k2qyDazkDSREThjhOZ-DNCZ1SNTNrixIw-R08aiogP5E2MLmIewOZ-nUIFD7rEb4d_KdaTA3pPB3AE3X4wVKs2U8/s1600/menu5.gif) 0 -32px; padding: 8px 0 0 35px; }

HTML code:

<div id="menu5"> <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>

Hi vọng các bạn sẽ tạm thời hài lòng các Menu này. Thank for Reading.