Home »

Menu - Thủ thuật tạo Menu ngang cho Blogger bằng CSS

Thứ Năm, 19 tháng 6, 2014

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn Phần Tử Trang 
4. Chọn Thêm tiện ích .
5. Thêm tiện ích HTML/Javarscip   6. Đến đây có 2 mẫu cho bạn lựa chọn.

Mẫu 1 - Màu sắc.
Menu - Thủ thuật tạo Menu ngang cho Blogger bằng CSS

<style>
#bt4unavmenu{height:46px;display:block;overflow:hidden;padding:5px 0;margin-bottom:6px;border:1px solid #333;-moz-border-radius:07px; -khtml-border-radius:07px;-moz-border-radius:15px; -khtml-border-radius:15px;box-shadow:0px 0px 15px #252525;
-webkit-box-shadow:0px 0px 10px #252525;
-moz-box-shadow: 0px 0px 10px #252525;background:#222 url() left top repeat-x}
#bt4unavmenu .current-cat a{background:#4AA02C url() top left repeat-x;color:#FFF;-moz-border-radius:15px; -khtml-border-radius:15px;border:1px solid #111}
#bt4unav a,#subMenusContainer a{text-decoration:none;display:block}
#bt4unav a{margin:0;float:left;background:none;padding:15px 15px 15px 15px;color:#fff;text-transform:uppercase;font-weight:bold;font-size:12px;border:1px solid #222}
#bt4unav li a:hover,#bt4unav li a:focus,#bt4unav a.mainMenuParentBtnFocused{background:#8eda22 url() top left repeat-x;color:#fff;-moz-border-radius:15px; -khtml-border-radius:15px;border:1px solid #333}
#bt4unav,#bt4unav ul,#bt4unav ol,#subMenusContainer ul,#subMenusContainer ol{padding:0;margin:0;list-style:none;line-height:1em}
#bt4unav ol,#bt4unav ul,#subMenusContainer ul,#subMenusContainer ol{background:none;left:0}
#bt4unav li{cursor:pointer;float:left;margin:0 2px 0 0;padding:0 2px 0 4px;height:44px;display:inline;background:url() left center no-repeat}
#bt4unav li:first-child{background:none;padding:0 2px 0 0}
#bt4unav{width:940px;margin:0 auto;clear:both;overflow:hidden;font-size:12px;display:block}
</style>
<div id='bt4unavmenu'>
<ul id='bt4unav'>
<li class='current-cat'><a href='http://fun-vn.blogspot.com/'>Home</a></li>
<li><a href='#'>Menu1</a></li>
<li><a href='#'>Menu2</a></li>
<li><a href='#'>Menu3</a></li>
<li><a href='#'>Menu4</a></li>
<li><a href='#'>Menu5</a></li>
<li><a href='#'>Menu6</a></li>
<li><a href='#'>menu7</a></li>
</ul>
</div>

  • #4AA02C là mã màu của nút home:
  • #222 là màu của menu
  • #8eda22 là màu của các menu khi dê chuột vào
  • Thay dấu thăng màu đỏ (#) thành liên kết tới nhãn, trang hoặc bài viết.
  • Thay các chữ Menu từ 1-7 thành tên các nhãn hoặc bài viết tương ứng.
Mẫu 2 - Đơn giản.
Menu - Thủ thuật tạo Menu ngang cho Blogger bằng CSS
<style>
/* liDock CSS */
ul#navlist {
display: inline;
list-style: none;
}

ul#navlist li {
float: left;
width: 60px;
height:24px;
}

ul#navlist li a {
text-decoration: none;
width: 50px;
height:20px;
padding:5px;
font-size:7pt;
font-family:arial;
text-align:center;
line-height:20px;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
border-right:1px solid #fff;
border-left:1px solid #fff;
background: #003663;
display:block;
color:#fff;
}

ul#navlist li a:hover {
border-top: 5px solid #004a80;
border-bottom: 5px solid #004a80;
background:#004a80;
font-size:9pt;
font-weight:bold;
}
</style>
<ul id="navlist">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
Lưu ý : 
+ width: 60px; , height:24px; : kích thước của mỗi menu khi rê chuột

+ width: 50px; , height:20px; : khíc thước mỗi menu lúc bình thường

+ line-height:20px; và height:20px; 2 code này phải có trị số bằng nhau.

+ background: #003663; : màu nền của menu lúc bình thường

+ background:#004a80; : màu nền của menu khi rê chuột vào
 
6. Lưu lại và ra xem kết quả. Và giới thiệu thêm 32 mẫu Menu đẹp và đơn giản khác cho bạn.


Để khách truy cập blog có thể xem blog một cách rễ ràng hơn, và để blog của bạn trở nên khoa học hơn thì việc bố trí xắp xếp các mục để mọi người tiện theo rõi là một việc rất cần thiết. Trước đây, tôi có hướng dẫn tạo menu ngang cho Blogger, nay có các mẫu mới các bạn xem nếu thấy thích thì chép code dán vào blog theo như bài tạo menu ngang cho Blogger.
* Menu 1:
<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: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } 
#navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } 
ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } 
#navlist a:hover { color: #fff; background-color: #FE9C54; } 
</style> 
<div id="navcontainer"> 
<ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li> 
<li><a href="#"><span>Link 2</span></a></li> 
<li><a href="#"><span>Link 3</span></a></li> 
<li><a href="#"><span>Link 4</span></a></li> 
<li><a href="#"><span>Link 5</span></a></li> 
<li><a href="#"><span>Link 6</span></a></li> 
<li><a href="#"><span>Link 7</span></a></li> 
</ul> </div>
*Menu 2:
<style> 
#navcontainer { float:left; width:100%; background:#fff; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; } 
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: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } 
#navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; }
ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } 
#navlist a:hover { color: #666; background-color: #fff; } 
</style> 
<div id="navcontainer"> 
<ul id="navlist"> 
<li><a href="#"><span>Link 1</span></a></li> 
<li><a href="#"><span>Link 2</span></a></li> 
<li><a href="#"><span>Link 3</span></a></li> 
<li><a href="#"><span>Link 4</span></a></li> 
<li><a href="#"><span>Link 5</span></a></li> 
<li><a href="#"><span>Link 6</span></a></li> 
<li><a href="#"><span>Link 7</span></a></li> 
</ul> </div>
* Menu 3:
<style> #tabs { font: bold 7.5pt Verdana; } 
#navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#575656; font-size:93%; line-height:normal; } ul
#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul
#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; } 
#navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; } 
#navlist a:hover { color: #fff; border: 4px solid #fff; } 
</style> 
<div id="navcontainer"> <ul id="navlist"> 
<li><a href="#"><span>Link 1</span></a></li> 
<li><a href="#"><span>Link 2</span></a></li> 
<li><a href="#"><span>Link 3</span></a></li> 
<li><a href="#"><span>Link 4</span></a></li> 
<li><a href="#"><span>Link 5</span></a></li> 
<li><a href="#"><span>Link 6</span></a></li> 
<li><a href="#"><span>Link 7</span></a></li> 
</ul> </div>
* Menu 4:
<style>  #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img
{ border: none; }  #navcontainer {   margin: 10px 0 0 30px; padding: 0; height: 20px; }  #navcontainer ul {   border: 0; margin: 0; padding: 0; list-style-type:  none; text-align:   center; } #navcontainer ul li { display: block; float:  left;   text-align: center; padding: 0; margin: 0; } #navcontainer ul li a  {   background: #fff; width: 78px; height: 18px; border-top: 1px solid    #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd;    border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color:    #666; text-decoration: none; display: block; text-align: center; font:    normal 10px/18px verdana; } #navcontainer ul li a:hover { color:    #6659A7; background: #eeeeee; } #navcontainer a:active { background:    #c60; color: #fff; } #navcontainer li#active a { background: #c60;    border: 1px solid #c60; color: #fff; } </style> <div    id="navcontainer"> <ul id="navlist">
<li><a  href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link  2</span></a></li>
<li><a  href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link  4</span></a></li>
<li><a  href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link  6</span></a></li>
<li><a  href="#"><span>Link 7</span></a></li>  </ul> </div>
* Menu 5:
<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdG3MIaNKz2YJTR7BCbDdgUtVgw1ke6sAL7N6QPCWKTaQBH-bzZoa2eA5p9PC_VerMH-46wCsLc7SChBAMI0qqTLO6t9LkMyjKw7ABXpxmbDyHYMHyZEhfRdAa3Vvl68u1AAYo6FQAWZs/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 6:

<style>   #tabsI {  float:left; width:100%; background:#EFF4FA; font: bold 7.5pt   Verdana;  line-height:normal; border-bottom:1px solid #DD740B; } #tabsI   ul {  margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li {    display:inline; margin:0; padding:0; } #tabsI a { float:left;    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiPpactbD8xcC3ne7P4CRFSvKUGiY2lU7LJAKmC9qE2nyQpX_tN0ehzoVwunPttLwTNrJoaOrKkORb8LzIX7OL59pXfHERtYdMBIzxGsyNDwSH-6sVekhBUSdh2ckO-kMaYYFKzi48B8U/s1600/tableftI.png)    no-repeat left top; margin:0; padding:0 0 0 5px;  text-decoration:none;  }  #tabsI a span { float:left; display:block;  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix8-U3IlJdOBCFZFTbfSRmlEFvJLVVQmKqDgN0QAGFYi4bXzql1e0_YN1pqKZlJaZtpvEA6REEE9iyV3YEtZKCa6N-DIpKaj6BfREBYut5iW6ktSTvsGhp59d6nYKixFsgc7Pb3BVAT4s/s1600/tabrightI.png)    no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*    Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span    {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; }    #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span {    background-position:100% -42px; } </style> <div   id="tabsI">  <ul>
<li><a href="#"><span>Link  1</span></a></li>
<li><a  href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  3</span></a></li>
<li><a  href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  5</span></a></li>
<li><a  href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  7</span></a></li> </ul> </div>
* Menu 7:
<style> #tabsG { float:left; width:100%; background:#666; font: bold 7.5pt Verdana; line-height:normal; } #tabsG ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsG li { display:inline; margin:0; padding:0; } #tabsG a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7hw2SbzED_66vnPA3TSTyKDjBVZhvaNkGDWljzzQxXUUEDVV7HeBg02DgjkvlPwzBY_mMkJF8SG8NO9jK2SAZD7vg6biFLWGsNeYEi0O6N6UcFO3Jox5k3DI_A1NtLGBPIDI8LyTIfDU/s1600/tableftG.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsG a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2BC_m2tiAXsPYpN43M7-r6-ezdCRnu7r7oEpfGYxNqjo5IjfqFWgGsz1wM_9t7IjsXta9YThxPqshewVdOb29vuJzJjfHUk5jnB6p_pEyT1Jn1yhV7RGPKvkB6C2BMx4ZojptjN4k5T0/s1600/tabrightG.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsG a span {float:none;} /* End IE5-Mac hack */ #tabsG a:hover span { color:#FFF; } #tabsG a:hover { background-position:0% -42px; } #tabsG a:hover span { background-position:100% -42px; } </style> <div id="tabsG"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 8:

<style>   #tabsF {  float:left; width:100%; background:#efefef; font: bold 7.5pt   Verdana;  line-height:normal; border-bottom:1px solid #666; } #tabsF ul {    margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li {    display:inline; margin:0; padding:0; } #tabsF a { float:left;    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSP8ZYMqNYES90g5zJbK0us1S7-UHO8Fe46yHC7u8kWoamTcvCXG5VtOrikcrPlK2Bjx0I6MO1YfDrcN3KN9noHw0NUYV8sRTIeprZb4z3n6vS7RZvx6me6PGLAv6FAcPbaVOppsGyPsM/s1600/tableftF.png)    no-repeat left top; margin:0; padding:0 0 0 4px;  text-decoration:none;  }  #tabsF a span { float:left; display:block;  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGZ8CGHPb6noe4WanDEfT3N6ep4QXcDUhNeZCkTcIeJi-lqgTBIXWxmwa2bjn3dA43Co_KDDKXNjeLYlOVNmezLy0iR1YGnCgBF1Vh29IGkctI3ONTqNjzCR-W0dNicm0dd2GhaLazI4A/s1600/tabrightF.png)    no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /*    Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span    {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; }    #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span {    background-position:100% -42px; } </style> <div   id="tabsF">  <ul>
<li><a href="#"><span>Link  1</span></a></li>
<li><a  href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  3</span></a></li>
<li><a  href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  5</span></a></li>
<li><a  href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  7</span></a></li> </ul> </div>
* Menu 9:
<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 10:
<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpUd0cyYeLWZdtTh4myzoFkZsMhEPkG9AdxmjDr6ks1tkb0okBZ9T_ZqYNv94DtguBZvM2gl6doDHTl-FBmTwsbAv6puVyOvLmU3-oJTD79_lrLkhhHiHkXobKfKpPve4nH7zj5IcX0Fw/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdf7rS-hAGjaF8scBUlfTw69_qqh1jITQrDS8oqQdYYmzyWYrY8UAb5zlpPye-Xj1zAKVOC9SkfyzRqRRDJc91YBKqXXnVaCsCRoxBLxTIae_18cGDRXuwTpe8ZDRRl8lIDb9vloNPVDg/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 11:
<style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0CqbMutDrOxFIbxqNvTmNApfnNcKzYVoU7DepZHVzTYqJaSnYvjPdSN-O2cTLEfL61LDrvGZhSbBqkwv-nbjRJ3tOPpJXdKge2sQ8s3hsA_sA7zgcCakRWIkTrNn0hRq6FJs1h3vrL0w/s1600/tableftD.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiNn1k54fuJi3xg5egwr2VrMd4w7exjwi4EgSuIGV7ziu9d7svPjHLjHYDBV7eu84IugTpJl1vkjIESaen0RnKX-1dnWBr9lARQiRymrSuH2kD0Tnj6a72xCu9QlKyeCzq0noeXT8ph6o/s1600/tabrightD.png) no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style> <div id="tabsD"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
*Menu 12:
<style> #tabs12 img { border: none; } #tabs12 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs12 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs12 li { display:inline; margin:0; padding:0; } #tabs12 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd-I2VlP-lDXnMNNrnSQs03PVhO-P4GlEobNunPGY8dmgnpJBeYVcJAcoNqaZMERS8VrviItqNF0DToOnqfqaupschuPgXPxgxFp7z3XO655vXk_3zc-Ny0ErTibXyQxwUTTUWL12c0tg/s1600/tableft12.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs12 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ9m73YlHAZPuUwUvqw2m6yncnyyPFMJI-ZknkS6bKSEHW0vX_PAObeYQWLGfAKZYxeVg_yrnAKCLJeAFxhN_cU9Cn8-5gY6WpxRb4L1h6QFe70HQpaYtxDjoftSwdogGeU1-aCdIhYwM/s1600/tabright12.png) no-repeat right top; padding:5px 15px 4px 6px; color:#E4D6CD; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs12 a span {float:none;} /* End IE5-Mac hack */ #tabs12 a:hover span { color:#FFF; } #tabs12 a:hover { background-position:0% -42px; } #tabs12 a:hover span { background-position:100% -42px; } #tabs12 #current a { background-position:0% -42px; } #tabs12 #current a span { background-position:100% -42px; } </style> <div id="tabs12"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 13:
<style> #tabs11 img { border: none; } #tabs11 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs11 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs11 li { display:inline; margin:0; padding:0; } #tabs11 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyWxZkUN42MVGXVSCgcHsxwfM4WJ-Foe-aZ4R0LGPqU8M0gXEjwWNLUQrjCR2JOXw7cZlZlE42L3aBfrrygJEkKC8FkIoxGNVpkxvfkyJ_NyoThPnhZS_oIBdiV2lvLOMBUo22E0V0O5U/s1600/tableft11.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs11 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsi_sOJgGJkOwhXH4CWw2-cjE1TopCc_Hxv_g5HrOGAfky65z0TB_iP1MqutOn0-WZdONMHxSvGg-1lR_u1zvpUGJsVWdXvkvQzi52OKxTCAChVd7Kxx4-GbXtantERLh2GBMeVTe9Hf8/s1600/tabright11.png) no-repeat right top; padding:5px 15px 4px 6px; color:#9F9584; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs11 a span {float:none;} /* End IE5-Mac hack */ #tabs11 a:hover span { color:#FFF; } #tabs11 a:hover { background-position:0% -42px; } #tabs11 a:hover span { background-position:100% -42px; } #tabs11 #current a { background-position:0% -42px; } #tabs11 #current a span { background-position:100% -42px; } </style> <div id="tabs11"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 14:
<style>  #tabs10 img { border:   none; } #tabs10 { float:left; width:100%; font:  bold 7.5pt Verdana;   border-bottom:1px solid #2763A5; line-height:normal;  } #tabs10 ul {   margin:0; padding:10px 10px 0 50px; list-style:none; }  #tabs10 li {   display:inline; margin:0; padding:0; } #tabs10 a {  float:left;   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhu-b08GP_Sb-sj4OHfmD9IzHLP7BPwoY5V1PHoX872f_v17OnFGHJxEGCZEFmZvBQoir16UuyNCHEBEezMtpRSxeEMAnRrfiQyJhebhZL5dkOHDG6YSoyRwSV9K7HbFmVtsMplrLbxY8/s1600/tableft10.png)    no-repeat left top; margin:0; padding:0 0 0 4px;  text-decoration:none;  }  #tabs10 a span { float:left; display:block;  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNVp-AFKv-Nb4M255jHOtu8TKY8ZerQefcWli-J7neO7ObQP4vYDUETvrH0NuOpA75y_GOd4JlKS5Cn2NfgJuDMtNwANlRAh8RouLSbTt8oZ9kcQ3TAlDuWLy6vfmG33vnssQTHvXpkno/s1600/tabright10.png)    no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*    Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span    {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; }    #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover  span  {  background-position:100% -42px; } #tabs10 #current a {    background-position:0% -42px; } #tabs10 #current a span {    background-position:100% -42px; } </style> <div id="tabs10">    <ul>
<li><a href="#"><span>Link  1</span></a></li>
<li><a  href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  3</span></a></li>
<li><a  href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  5</span></a></li>
<li><a  href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  7</span></a></li> </ul> </div>
* Menu 15:
<style> #tabs9 img { border: none; } #tabs9 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #F45551; line-height:normal; } #tabs9 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs9 li { display:inline; margin:0; padding:0; } #tabs9 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOxBrLsEIJAlUfZx7X1iZ60qcf7NWYWF9-4oI8M7FOhmmifvHmetZ235yUw3pwp9ORrNQIlFOgIsYKQ3W3R6Rn3COvjjg_y-Kd_sx6C2fHYoTplaHzxbpYyzkN_2Oi62yyxtPoJnFJWHM/s1600/tableft9.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs9 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgydORdJizB3BsxuarTg-yyxzNBgq77GMbY29NE_b4XT5h9BrigG4-kRWOeKoGHMgy3ieGWQK4bcBq5QwF7PHzFJbUWadoIVPOxQ08_ibfr3L9MyVBhJDUN3CK6eStJ28cBdsUiASzimtk/s1600/tabright9.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs9 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs9 a:hover { background-position:0% -42px; } #tabs9 a:hover span { background-position:100% -42px; } #tabs9 #current a { background-position:0% -42px; } #tabs9 #current a span { background-position:100% -42px; } </style> <div id="tabs9"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 16:
<style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoOUii8F3zRNkU1h6iS_TysOd5JJzg_zb9gWf6ianNrUb1WiE7cPIjZN77w7zSkpldSiQ4CWi1Vq56cuwJ-Xmy9soY9HpvOglI9iEu05gREbrj3-Lo7QG7StMvqjmM7E3edg4_STc0Cxk/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGsy39mtBoOPDdJ2KsyLV32LeCj2jRdwQDE383m8PQbeG_qew-iXGiqiHofsQQv_N2PpoELN_7FzgzS5o-h3vKln8HimW6xcMgyFZRG-zKMrwtA2iLJOdQGxbMP9hVNKs0jak_m51-NSw/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style> <div id="tabs6"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 17:
<style> #tabs8 img { border: none; } #tabs8 { float:left; width:100%; background:#FCF1F6; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #E276A7; } #tabs8 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs8 li { display:inline; margin:0; padding:0; } #tabs8 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOReGpLazxlSJEvdzwxrg56b7cdTaRiczFCXzKLvnyzvXwCqV8qMWnIWpJpUAE3p8MagBq9Tw6m1gckihDwNWhug4XWU5V1PNBuJ52T-XiYMdo-E9wbVDkw1VxIDvYnuhpjNuEsr9kmZY/s1600/tableft8.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs8 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgauclF6rIZo0sPis4NCHgH44sVHgzWbXArB7pP2LngWs71oizyrdpfNSFu51lm8023Lj6mX5lG18K7w8R7jD96IoRAU7HD6GgIqEopSv4AxE5tgyew_nFOyPBghbAEv3t8JMjo3GXiEh0/s1600/tabright8.png) no-repeat right top; padding:5px 15px 4px 6px; color:#333; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs8 a span {float:none;} /* End IE5-Mac hack */ #tabs8 a:hover span { color:#591333; } #tabs8 a:hover { background-position:0% -42px; } #tabs8 a:hover span { background-position:100% -42px; } #tabs8 #current a { background-position:0% -42px; } #tabs8 #current a span { background-position:100% -42px; } </style> <div id="tabs8"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 18:
<style> #tabs7 img { border: none; } #tabs7 { float:left; width:100%; background:#D4DAE7; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #333B66; } #tabs7 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs7 li { display:inline; margin:0; padding:0; } #tabs7 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6bsSuFkz6Wl9M6USigdpRH7y29mymS_yLBdYkSQvDxoXNjjHPTHmM2XiRo05edR8RQadMhGnZxdB81Bp9AXL6chwHW_VHxp-gnmR-RrxYJ-QU2ZN3eW8PyTVy0Pt52nCzZ-hPVLKrkNs/s1600/tableft7.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs7 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg20f8yF0HQvwUExyRG6Cy6ua8f_81PCgxJ6DjzQirlGOxYmxwZLUESt-q8CTi1e1fYGVt9K1PR4HgWh_pw1WvGZlTvsfu_vUUoS_jKpEmgS_wIBxxmxeEHPgHmswMWWv6tuMUiXqX2Pwo/s1600/tabright7.png) no-repeat right top; padding:5px 15px 4px 6px; color:#999; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs7 a span {float:none;} /* End IE5-Mac hack */ #tabs7 a:hover span { color:#ECB546; } #tabs7 a:hover { background-position:0% -42px; } #tabs7 a:hover span { background-position:100% -42px; } #tabs7 #current a { background-position:0% -42px; } #tabs7 #current a span { background-position:100% -42px; } </style> <div id="tabs7"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 19:
<style> #tabsK { float:left; width:100%; background:#E7E5E2; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #54545C; } #tabsK ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsK li { display:inline; margin:0; padding:0; } #tabsK a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8atsJUDN2M8l7YpktscagyC6Ao8BXPlK0SFiMo8EUz4SLd6_yp_r_lCDkzsAT5vQyk2rZ1Yz1IFwyTQ7sa4gCAnyw4eWaOSBZu6ura87jTdaWttlc6WVCEy8qg3_ysqRLr18ehHxVHok/s1600/tableftK.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsK a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibTkQaoF8pC6-vLUWSNgt04swNJc88CvBa5ateiwqoTEpfafJsCaTXlbxrH9Fb-NS1j6GQIliUZriTjsqTVlNdc5yx8bngxXzz7VaufSOwGzVfyHG2T70LWDzncSp6GOOm8IvwLmi4xLk/s1600/tabrightK.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsK a span {float:none;} /* End IE5-Mac hack */ #tabsK a:hover span { color:#FFF; background-position:100% -42px; } #tabsK a:hover { background-position:0% -42px; } #tabsK a:hover span { background-position:100% -42px; } </style> <div id="tabsK"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 20:
<style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTSeEKGgWuW2LQXL97Gl-U3y2slxv98pZLcNjk454LDlRQuui9njt3cmhEdgDK-LlyhHQfNC2c0AH99EKQ_RsViNvTvUPjdTFOgI5KNvMesk4hopHmKgMP78l3HvTRI96bt36QIx8GUzA/s1600/tableft4.gif) no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhulanXM7_Os4B2ClwmS5AcYiJfNmSo83oC1FzceKEJk03IsMpYDPfrUItBKZuWpl_CXWGo4ONduwfx7JacA6dhnQraw62-JpNFjkFF7Ghs1ILG4WvhvrPkKm85g6G9qg8PAuePWsxMeyc/s1600/tabright4.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style> <div id="tabs4"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 21:
<style> #tabs3 img { border: none; } #tabs3 { float:left; width:100%; background:#E4E6EB; font: bold 7.5pt Verdana; line-height:normal; } #tabs3 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs3 li { display:inline; margin:0; padding:0; } #tabs3 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizyLrhHdg5ry54-gst_X3p9x_bVlAcnYxMD79S8HEibBjkfQE0xV8AqX3DImIm5YlHOF6DcO0pMVXB8ldInqF52D7WWijtXx05AHGW9CvJkE1-g4a-OT9IMbzV7dvhRAPVZZcglwbpmak/s1600/tableft3.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs3 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOkeZbhQUGAmFELiB5BumZUo5tZeZummH7mJBNNfTt4QAO_5qQ40Y0GS8LEx92r-5DLcgdsueCULVVrven8CyPFiSq-36ngVNVa2n0AbaByMWnfit1zSktjsNdwTHKGv1d3P1PlOtStHo/s1600/tabright3.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs3 a span {float:none;} /* End IE5-Mac hack */ #tabs3 a:hover span { color:#FFF; } #tabs3 a:hover { background-position:0% -42px; } #tabs3 a:hover span { background-position:100% -42px; } #tabs3 #current a { background-position:0% -42px; } #tabs3 #current a span { background-position:100% -42px; } </style> <div id="tabs3"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 22:
<style> #tabs2 img { border: none; } #tabs2 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #84776B; } #tabs2 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs2 li { display:inline; margin:0; padding:0; } #tabs2 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDOVZeURP7YPC_7nD8tySNTc0B9aN1goNpLp4JE5wlU8AMQVKz8Op5NCB5bsRgHECzewTGduCxERfa6Y7HByzKQ7Y521K_WLI3E6yj8gZMK0jHWfKsuR785JCYefHtQ5EV2CX9tgBaZ1E/s1600/tableft2.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs2 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOu4UYM63qqnvhndeR9aFSC8bSoaq-XN3DQaDmi_rHivyHcEjkd8ae4cpL3LZoCeNeU6AVwuNgxAx-saQvixjSytpxBgbwY3lZlpPMuy4vWRbZmRQy1lA8ML7UiAZkKo4EdwFQD5jbIEo/s1600/tabright2.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#84776B; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs2 a span {float:none;} /* End IE5-Mac hack */ #tabs2 a:hover span { color:#74675B; } #tabs2 a:hover { background-position:0% -42px; } #tabs2 a:hover span { background-position:100% -42px; } #tabs2 #current a { background-position:0% -42px; } #tabs2 #current a span { background-position:100% -42px; } </style> <div id="tabs2"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 23:
<style> .container { width: 500px; padding: 15px; margin: 3px 0 20px 0; border: 1px solid #ccc; background: #fff; } /* square */ #navSquare { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; } #navSquare li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navSquare a:link, #navSquare a:visited { float: left; font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; } #navSquare a:link.active, #navSquare a:visited.active, #navSquare a:hover { color: #000; background: url(file://localhost/C:/Program%20Files/CSS%20Tab%20Designer%202/styles/Square/Square.gif) no-repeat bottom center; } </style> <div class="container"> <ul id="navSquare"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 24:
<style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #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: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 25:
<style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbwtqil4PV_xmTQIUAcPV_hKNWB-V3lTeFChlWGim-sD51Tn79iXer4IAHyFs-R9MGHoRkij3WHbYtcHwGNQl2wLEW47ol3rSqtwXXMoAF3fBIfaY4i2geVVjglMqKuylwUG_qzfbjTDY/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbDd3g087B8Vwe5brRf4dc7JKOLKILqPvb3YwAwj1BqluovGXyiCE61mVHOS4zwG6L4OZ2fyiCxAqAmHpUN_2Kn3WCxGV-XyCv3kv2YB7S6MCF7TqNhDHnRxYyRPrug_YnWizABgRbWnE/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 26:
<style> #tabs1 img { border: none; } #tabs1 { float:left; width:100%; background:#F4F7FB; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBvNMtxouU_TB4vOoluiJU8fdN2BeGWFH2T-imLdPmadz5biLgYhEa5qoAv0DM7e2L_eV7VtFjpY53Oagnpukwo-s2ZY_txXMk3YD_6km-jq9mvS_gdVMZx5lbv6oBQrzsa0ah0eYO8vU/s1600/tableft1.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs1 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6bf4wuGItM3Y_ECHfWRyuLmOGSQdDEqEZWmWLKb48x-5VSLk0wp5q1J3kkagNkRUd_f16JAdXOjwhRbpRPxTNi7daQ2scDfK8eZJ9ONnhfeYTaIqKOM5B2lUbxuogk4iwURCTGYbO7AU/s1600/tabright1.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px; } #tabs1 #current a { background-position:0% -42px; } #tabs1 #current a span { background-position:100% -42px; } </style> <div id="tabs1"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 27:
<style> #tabs { float:left; width:100%; background:#BBD9EE; font: bold 7.5pt Verdana; line-height:normal; } #tabs ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOgOrrsxHcc8ndCPyIcA-HJv8mbGxEvJNWmwl6U64eMq4x_CXUmE-sNcwa65YYkqA9o5bizJP9r6Jqjm8xLfaaKen5S_HoeLj_iUOqvRiuOM9toO9I_FZreebcCGnLhyEcZwwvZfIuvSY/s1600/tableft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDuwe5Xn3dYr4-RScxFqvdIha4t8nJsx9fs5uM2iGo5zBTJ2lsB3yZHM7v3fPwglViT1Ns8sLkvuaTcUDbFCw7Cl2rFlMLGcrJ3g4cgk9RCJ7KAUTHsU00zymHqc2tIdJs3IzOLDfQGKE/s1600/tabright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#FF9834; } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; } </style> <div id="tabs"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 28:
<style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHQ1MMQSAOuIfbRMYyrUNB_NUFmGQAs9sY5z-I-WnDtjxdGKOAacScevl3Ujxyo51P6iDTDkjkPIODqLV0JFrfK-KcU922_WzS5YUvbWWBDRccMEx7UFR-l6yzJYcA7RYVJwgeQquTXgKO/s1600/tableft5-namkna-ngoctra.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs5 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZtg24MdNVSAxlimsIfef2T05L2VGTyEB1qEyCoMtEY1dUZzKrNMQw2OSI6z4Ic05gr6Yxkc1fldbizJluqoHPquU02XNXuNHxR_KXvJLsXwnVs1DySRzBLglY2_pkoGv4m1-0mN6r1gQl/s1600/tabright5-namkna-ngoctra.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs5 a span {float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background-position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-position:100% -42px; } </style> <div id="tabs5"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 29:
<style> #tabsB { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; } #tabsB ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsB li { display:inline; margin:0; padding:0; } #tabsB a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9B5ZFHQo8LquxU_nhgY2kgKS1Cyvyos2tSrO_wGhNPtLCxHN2QMCT5UbwhAQ-FgpFFTorMFrnjbfCV2jCCILBAh8d-Lb1gsGtLUYZXpBvmlaqYAhuXfnN-ISB5Pb2Xe7RFfPGrHHTvDQ/s1600/tableftB.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsB a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDSYwW9oStfbszeIhYEyrfP6UZw5H4HBNmstrL4nFuLAsWj-7mDkXLDzpJQJ6dCTUFFBvhGHvyUt1WoV21-etZYZuHiW-7YQpHIdG9OBaKwj9Tet2rSL_474i66RJouMHZzkWVwLr1fgo/s1600/tabrightB.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsB a span {float:none;} /* End IE5-Mac hack */ #tabsB a:hover span { color:#000; } #tabsB a:hover { background-position:0% -42px; } #tabsB a:hover span { background-position:100% -42px; } </style> <div id="tabsB"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
* Menu 30:
<style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQnajb_AiaY-IgFdrd4uRwQJjdP2D7a-aGpFK7MAFdyPx1fdgbpAQCx9yx8FaRG_oxR3oJwvHFYjqChO96wG3kIM71elvp9uLkgOEUkdf5ATaF862BHo9APmk4aGppbqLW2CEgSz_v37Q/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhHqBxTax1WoMeOLfXo3-1zBNsxzrajtLJ_UTGAxi8-32GDCHgAVLd_yI6U_Eu5XV7mmMPlnXxfKauUiGFBz8MXjog55iCqc8OhsqlESA_l-vAZl_0WcZROy94cxlDD5aMyoe8dsh5Khc/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>
Menu 31:

<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 ></ul> </div>
Chúc thành công!





Tags:
, 





    

    • 

    • 

    • 

    • 

    • 

    • 

    • 

    • 

    • 

    • 

    • 

























Comments[ 0 ]
















Đăng nhận xét