1:21 AM

Cập nhật nhiều mẫu menu ngang mới nhất cho blogspot

 

 humghn.com 

Để làm phong phú thêm sự lựa chọn về thiết kế blogspot , trong bài viết lần này , chuyên mục sẽ gửi đến các bạn tuyển tập các biến tấu mẫu menu ngang cho blogspot . Với các mẫu menu ngang biến tấu này , các bạn hoàn toàn có thể thiết kế những trang blog/web chuyên nghiệp cùng các hiệu ứng 2D và 3D . 

Trước khi áp dụng những mẫu menu ngang này , các bạn cần biết cách để chèn một menu ngang tại đây
Sau khi đã tham khảo cách chèn menu ngang , các bạn chỉ việc thay thế các đoạn mã sau đây và thẻ HTML/JavaScrip là được . 
Chú Ý 
Để biết trước được hình dáng , màu sắc của mẫu menu mà bạn định chọn . Bạn chỉ cần copy mã của menu đó rồi dán vào ô thử mã phía dưới để kiểm tra . Sau khi chọn được menu có hình thức ưng ý rồi thì bạn mới post vào blogspot/web của mình


Nhập mã cần thử


Mẫu 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> 
</ul> </div>
Mẫu 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> 
</ul> </div>
Mẫu 3

<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>
Mẫu 4

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

</ul> </div>
Mẫu 5



<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/AVvXsEi_SdLkcQyM9PqJcb_gNRzcIW1AWXcyALGlxpeAshsd0JYAnUyS55K0iWYLln66aj6RT0S1x7lN02cG7mUdZkju8DXREiJAwUNowDLwHSkGU23fIN2sVXBxGVowlfmrCBN-jY0gM8SK5u0/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/AVvXsEisRRXM43q49jEjxnRy8OrWwcrrhLN16N09KI2JDNIJXdIcXsKwGx0LoIeEzXLFLrX4twcHlebkx7laR1GVDo5gOSo-NzV4gA5d0jTCT82kYvWI8Ve7G7kV8TlFdAxHZR_5wgCeNQxXdUs/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  7</span></a></li> </ul> </div>
Mẫu 6

<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/AVvXsEgmgZlObZ1JPk-6NlTBH1XBnULrEuI6Sj6__pjqwNXbEbnBs_Hi5VrKU2za8k8kHaF4-4JNRREgDa3dSyOqbzb_KP_hc6kzb5oawf9qME3KW2c2-z-iy9Duta4znXypYWpDydvTGXIvXpY/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/AVvXsEhPLSacgrXgSVIMYB2EVMrwC6ht4OAiG8wJJsof3rSCz3_gbc4gR1XS03VrNfIDEsuu6fJ0dJWkikO8K87dsYOZeXZAmxmT5Gbg5-Mz2dP5P78evcjGX1dEvCo6mQPoyQPWYKUQeMRrMow/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>
 </ul> </div>
Mẫu 7

<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/AVvXsEgrs4XqLRZ-nrLk6J44znopzepL5rIv9FnjZQf3uf5ZxFmhnMIeHa9WGnqStY1KZN_SHa3QDKyv6edzkqGNy_LSkkFMhyjsIkj9Uck5jhcRyiB2W5ZBpAiF5eNjGwYa-7UWMHjMJAR8mro/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/AVvXsEg1PTjXZsZBNzfrMDF2QBjTAMTvEE78KDXDvSCTSBjISG228hODpaf3-HdrBr9mNzREn7G_qC3Qso1ghc9kwfBJ2XER3-QrqQKhr4r1eo6K_R72VZQ52-sZMbt6JKbfeqC4erNvPy8U6hM/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>
 </ul> </div>
Mẫu 8

<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/AVvXsEgXNgmvzBiIdyoTxj-iJu41UbyxzCKyCZ-_itwn255nrUNx3iMLaUozhkHJpoFwOQkHtEsJ4EaxT3XMHNvoSiPFrNKeEKXcMxNeoHG1cerpZ5jCm4WVZS9wwVYyfsTKcheY2xAq2I8HqGk/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/AVvXsEjX1FEmNTxIIoOU31pcTgsK8Z_6BB7nuoPaCi5xvIRZ9a1nHU-dTsdzV3ZQOCL3P7kMs2A9vN83bN3nEYhyg56EjkClr2-0yrP72GhjLja_KG891r9TafvUTrFnjHXkDcptIIhjsUB1lR8/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>
 </ul> </div>
Mẫu 9

<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/AVvXsEhwJOCkYCUS7_JUftL4X7c5G0peXlZAwk7vQnoEZtFg5n1YN0-ku5zTGJKmYOrAMvllTeuaSz8aZvKlrFJdPiWtzRbtrSA0OoYW4MZWiDhdH5qIb4Tg_-l7Vxyz54-9EFsFjvi_gNmbDAU/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/AVvXsEhQ4fxzn4nduvMc5fuIZ-qfq133wS3Q_JLNpJAz2LgYc1TXRy4tB7S0rncU7iKQjCIp2_YO0oxP2t_qEgKgj8cd-U77Q8ez032rZIjepZT2EJtyMvflVwCwYv7GOAJZmDtH3gE-mICLL8M/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>
 </ul> </div>
Mẫu 10

<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/AVvXsEiAOSvHwITihj7X6Q4L-jW28DRAMSkzBt14zklMBho8RIJgDComxt6Fq272fcUAx1CQGqlNWixOSTzTf4AqLIM3QzrM6Qy446Ii55nA74xQICgSUnakzzI8TjYjWjPA86QF6PCkMquw6rc/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/AVvXsEiq-SYp3PA5P2btqjusQKAIN_jxdkj_MRQgiKArLFoXg3L2Zz5NtLJY0igktEeYhSAKRar7SH63mw3miKL1clVsngLWxni8PFJHLTlflZvZJssJo0cVfnrFvubf02jW7gnn5sBsl5OjOK4/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>
 </ul> </div>
Mẫu 11



<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/AVvXsEgu8NEKQMSYMy0sMV2ItgDFFTd6iVu5piqz3VJZqsmr-1AHAhaYScZXynCpbk2GvYibJkocs5VLmrkLL6xMKbpy-IMPAt_MOiZo57011kUklcZTeV-R_fc2a0QxRwG_xawWSjJKY1ZTK4M/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/AVvXsEhEAK0T5pXGSz2VWrhUgyuVm6A2p3hGnacg65hKyP8cG2TCjS7cgD1l-Pvla3zo887Afa3wkgLVkaSwRbCBtuu9ESaWgemjLhXS-SQPkAC3MKRLHvbAyQfne5bhgaJ7tv2RuysTdwiMOj0/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  7</span></a></li> </ul> </div>
Mẫu 12



<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/AVvXsEgfbIHQItT445wMtqG1Xb3ujwEVQcdSp6pyCeYR06hj9bSCiYUBw1Wu19JCiNAfcIQwp-tmoXbJQRG6xYg_LFwIunh6bvIRYRUYokl5BtFiQ0cYhWB394zYJ0J73xFRMltKLBj5aDloF80/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/AVvXsEiWQf4lWZ9Q4sTC_hHtWso5TZQ5TOk6Lw2M1BZsT7_gZZtOizPwQ8PuIQe8QvoYThiLsVdJl8xhW-fngiT2pyz9BPkJGkheLFGjDquD8LmpHWI44bPbkF5lzSWQC5UYPtCnSqg2ciQ3cCQ/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  7</span></a></li> </ul> </div>




menu-blogspot

 

Copyright @ 2013 Thông Tin Công Nghệ - Giải Trí & Học Tập.

Designed by Templateism | MyBloggerLab