humghn.com
Các mục mặc định trong nhãn được hiển thị quá đơn điệu , điều đó dẫn tới tính thiếu chuyên nghiệp trong thiết kế blogspot / web . Để giảm đi tính đơn điệu và tăng thêm sự chuyên nghiệp cho thiết kế , chuyên mục xin giới thiệu tới các bạn những mãu menu dọc đẹp nhất hiện nay . Tùy vào màu nền , thiết kế , theme ..v..v.. của blogspot mà bạn hãy tự tạo cho mình những mẫu thật đẹp nhé .
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ử
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
Bước 1 : Đăng nhập Blogspot , chọn " Bố Cục " , sau đó thêm " HTML/JavaScrip "
Bước 2 : Xem trước các mẫu bên dưới bằng cánh dán code vào cửa sổ xem trước bên trên , sau đó bạn thấy code nào ưng ý thì áp dụng cho blog/web của bạn
Mẫu 1
<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; } #menulaber { width: 200px; margin: 10px; }
#menulaber 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; }
#menulaber li a:link, #menulaber li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXgV5E81ORr3FNG2vTSE1Gz5_SkpPoqozrCpq1qprTUup4jDOfu14IXrCnh1nvt_IzZr3J1wBSWdtSxdjqREE56Y7n89IWDmAlUcHfgyLfXeWEf2A6owbjvOFfUe4KF2KrMtgLkioqeAzf/s1600/menu1-namkna-blogspot-com.gif); padding: 8px 0 0 35px; }
#menulaber li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXgV5E81ORr3FNG2vTSE1Gz5_SkpPoqozrCpq1qprTUup4jDOfu14IXrCnh1nvt_IzZr3J1wBSWdtSxdjqREE56Y7n89IWDmAlUcHfgyLfXeWEf2A6owbjvOFfUe4KF2KrMtgLkioqeAzf/s1600/menu1-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 35px; } </style>
Mẫu 2<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; }
#menulaber 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; }
#menulaber li a:link, #menulaber li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEOJBbA-Y3nGcnURTkTz3uOGiuWMwoFacih8jRFNGqC3FDD7FkHWm3i-riCP1KvHJECkBYZGg8oaKKh7d8zmaZQigTcXH89QKwdXTTn5rvxk7WUk0ObyhIYdQNxqQwbkN_O0vxMx9BTb05/s320/menu2-namkna-blogspot-com.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover, #menulaber li #current, #menulaber li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEOJBbA-Y3nGcnURTkTz3uOGiuWMwoFacih8jRFNGqC3FDD7FkHWm3i-riCP1KvHJECkBYZGg8oaKKh7d8zmaZQigTcXH89QKwdXTTn5rvxk7WUk0ObyhIYdQNxqQwbkN_O0vxMx9BTb05/s320/menu2-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 10px; }</style>
Mẫu 3
<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; }
#menulaber li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8E5FQaJ8Bjo8DmGZs8KKwryHeMBXjY047r-GVR4HSklnemZqkThbRiuZAy7bXyMAA1GYWwI_KtlomHTVSAZey9WMZnSlBQGU0c9EAJ_2FH9NZxVEyffEzKFBtwAfzw3zkslWaKCuOoAqO/s320/menu3-namkna-blogspot-com.gif); padding: 8px 0 0 20px; }
#menulaber li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8E5FQaJ8Bjo8DmGZs8KKwryHeMBXjY047r-GVR4HSklnemZqkThbRiuZAy7bXyMAA1GYWwI_KtlomHTVSAZey9WMZnSlBQGU0c9EAJ_2FH9NZxVEyffEzKFBtwAfzw3zkslWaKCuOoAqO/s320/menu3-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 20px; } </style>
Mẫu 4<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; border: 1px solid #ccc; margin: 10px; }
#menulaber 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; }
#menulaber li a:link, #menulaber li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrtvUTRRFzZcjhhq9KExd8b4tf4nYeNSvKXtZEnEDNDa6AYF7ZL2_W3c1e0ORwiFeYyIFa2yerOxDi4IzzbtDtAGUox1Q6JQYtpggpDlHDwf3lGy29-J_uZY4lBEQ4Ayrl9yWAtc7omPWh/s320/menu4-namkna-blogspot-com.gif); padding: 8px 0 0 30px; }
#menulaber li a:hover, #menulaber li #current, #menulaber li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrtvUTRRFzZcjhhq9KExd8b4tf4nYeNSvKXtZEnEDNDa6AYF7ZL2_W3c1e0ORwiFeYyIFa2yerOxDi4IzzbtDtAGUox1Q6JQYtpggpDlHDwf3lGy29-J_uZY4lBEQ4Ayrl9yWAtc7omPWh/s320/menu4-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 30px; }</style>
Mẫu 5<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; } #menulaber { width: 200px; margin: 10px; }
#menulaber 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; }
#menulaber li a:link, #menulaber li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKIJgjHoOzUqgytlSQXNGOP0pvuCpdx4ku18LNcg2C88SV4JoYsWtMAGwc2VEgT1jSThfBJW9oZU3c5Ggbvekl6-hIF0oEGHYiY8j65x75AqlRElzCvZRX10TUEYQ2v8bvhdadv4qJN_j7/s320/menu5-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 10px; }
#menulaber li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKIJgjHoOzUqgytlSQXNGOP0pvuCpdx4ku18LNcg2C88SV4JoYsWtMAGwc2VEgT1jSThfBJW9oZU3c5Ggbvekl6-hIF0oEGHYiY8j65x75AqlRElzCvZRX10TUEYQ2v8bvhdadv4qJN_j7/s320/menu5-namkna-blogspot-com.gif); padding: 8px 0 0 10px; } </style>
Mẫu 6<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; } #menulaber { width: 200px; margin: 10px; }
#menulaber 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; }
#menulaber li a:link, #menulaber li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixgTE8Ul-RjqkH8nr851UT0MQlbG4HKrkpFY4sePmBqsasFaWOjtBMBnWjoiVv7GEeH0LRL-sr5KW1YKFq8HR07gCPcBYLujqp80UMiXLHOKZo4BAocKIPEF5Qh0ckjiMZ7HmU1h08r2zE/s1600/menu6-namkna-blogspot-com.gif); padding: 8px 0 0 30px; }
#menulaber li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixgTE8Ul-RjqkH8nr851UT0MQlbG4HKrkpFY4sePmBqsasFaWOjtBMBnWjoiVv7GEeH0LRL-sr5KW1YKFq8HR07gCPcBYLujqp80UMiXLHOKZo4BAocKIPEF5Qh0ckjiMZ7HmU1h08r2zE/s1600/menu6-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 30px; } </style>
Mẫu 7<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; } #menulaber { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; }
#menulaber 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; }
#menulaber li a:link, #menulaber li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8MnuT4HtWqXUYW8VDid_M9fntMDxfIgAUAMMcqPzYGWnP4QdLE97VRgVBY3BI95hCidpmspK9hNxPqRRVaBfOHADmR6WPjQIMzjE183d5ODjjlkErFrk8pQkkktjDc5DIEkK323L0xHn4/s320/menu7-namkna-blogspot-com.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover, #menulaber li #current { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8MnuT4HtWqXUYW8VDid_M9fntMDxfIgAUAMMcqPzYGWnP4QdLE97VRgVBY3BI95hCidpmspK9hNxPqRRVaBfOHADmR6WPjQIMzjE183d5ODjjlkErFrk8pQkkktjDc5DIEkK323L0xHn4/s320/menu7-namkna-blogspot-com.gif) 0 -32px; padding: 8px 0 0 10px; }
#menulaber li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8MnuT4HtWqXUYW8VDid_M9fntMDxfIgAUAMMcqPzYGWnP4QdLE97VRgVBY3BI95hCidpmspK9hNxPqRRVaBfOHADmR6WPjQIMzjE183d5ODjjlkErFrk8pQkkktjDc5DIEkK323L0xHn4/s320/menu7-namkna-blogspot-com.gif) 0 -64px; padding: 8px 0 0 10px; } </style>
Mẫu 8 <div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; } #menulaber { width: 200px; margin-top: 10px; }
#menulaber 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; }
#menulaber li a:link, #menulaber li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD_1myZeOUwpdP0SjmgMZJYCz6fpJUcsZONAgaH-vY60MCluCl0TEltMwUTLemsEP9ysfDPlgiRGBbEm46wm-9C8Xj9rRLkzljlJjB5YqOmZWI4nHM7qX9YGoYszrEWHtIvCt3p4fJaQ6u/s320/menu8-namkna-blogspot.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover, #menulaber li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD_1myZeOUwpdP0SjmgMZJYCz6fpJUcsZONAgaH-vY60MCluCl0TEltMwUTLemsEP9ysfDPlgiRGBbEm46wm-9C8Xj9rRLkzljlJjB5YqOmZWI4nHM7qX9YGoYszrEWHtIvCt3p4fJaQ6u/s320/menu8-namkna-blogspot.gif) 0 -32px; padding: 8px 0 0 10px; }
#menulaber li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD_1myZeOUwpdP0SjmgMZJYCz6fpJUcsZONAgaH-vY60MCluCl0TEltMwUTLemsEP9ysfDPlgiRGBbEm46wm-9C8Xj9rRLkzljlJjB5YqOmZWI4nHM7qX9YGoYszrEWHtIvCt3p4fJaQ6u/s320/menu8-namkna-blogspot.gif) 0 -64px; padding: 8px 0 0 10px; } </style>
Mẫu 9 <div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; } #menulaber { width: 200px; margin: 10px; }
#menulaber li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; }
#menulaber li a:link, #menulaber li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9YOd7HmyxwAeU31cvVANCkA6OFsBTreYQdxtn7MqSwR9cccWtPfK-LuAuuGaR0KhUSKifxzh2c4U_cTp-xmMQ7diXtBY3DVAXFuu5AIFM9IH9lDPi-Zl9JCJaxQdTJDclfLjVt2KF44_N/s320/menu9-namkna-blogspot.gif); padding: 10px 0 0 35px; }
#menulaber li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9YOd7HmyxwAeU31cvVANCkA6OFsBTreYQdxtn7MqSwR9cccWtPfK-LuAuuGaR0KhUSKifxzh2c4U_cTp-xmMQ7diXtBY3DVAXFuu5AIFM9IH9lDPi-Zl9JCJaxQdTJDclfLjVt2KF44_N/s320/menu9-namkna-blogspot.gif) 0 -32px; padding: 10px 0 0 35px; } </style>
Mẫu 10<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; }
#menulaber 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; }
#menulaber li a:link, #menulaber li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv78GqkQeUCo32iynZWNjIj6ORBe78tIr8vjkbwwtqSe7VI7Y3UQOaRGJKvl5d0cktJ5ZVRok6W-j9887X5AC-AvRGfpUwSSmxDXefPSbR3VY7Gb5_dzIq_NuLEG9mfalW5eor3_6YLyPT/s320/menu10-namkna-blogspot.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv78GqkQeUCo32iynZWNjIj6ORBe78tIr8vjkbwwtqSe7VI7Y3UQOaRGJKvl5d0cktJ5ZVRok6W-j9887X5AC-AvRGfpUwSSmxDXefPSbR3VY7Gb5_dzIq_NuLEG9mfalW5eor3_6YLyPT/s320/menu10-namkna-blogspot.gif) 0 -32px; padding: 8px 0 0 10px; } </style>
Mẫu 11<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; }
#menulaber 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; }
#menulaber li a:link, #menulaber li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjijLAM3hG1bsMRF7WS791PPO36-tla8TiFL-R4kKstXDHX56Pu1e1TJCwNcoCWkLZ1J4xpRPmbv2JeaMb5G4Z2KGE4rfo3mAqE8racskNOsrJeBDS8r1qdaSKSDBkRyRZmHIfFQdl_pmXa/s1600/menu11-namkna-blogspot.gif); padding: 8px 0 0 30px; }
#menulaber li a:hover, #menulaber li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjijLAM3hG1bsMRF7WS791PPO36-tla8TiFL-R4kKstXDHX56Pu1e1TJCwNcoCWkLZ1J4xpRPmbv2JeaMb5G4Z2KGE4rfo3mAqE8racskNOsrJeBDS8r1qdaSKSDBkRyRZmHIfFQdl_pmXa/s1600/menu11-namkna-blogspot.gif) 0 -32px; padding: 8px 0 0 30px; }
#menulaber li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjijLAM3hG1bsMRF7WS791PPO36-tla8TiFL-R4kKstXDHX56Pu1e1TJCwNcoCWkLZ1J4xpRPmbv2JeaMb5G4Z2KGE4rfo3mAqE8racskNOsrJeBDS8r1qdaSKSDBkRyRZmHIfFQdl_pmXa/s1600/menu11-namkna-blogspot.gif) 0 -64px; padding: 8px 0 0 30px; } </style>
Mẫu 12<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin-top: 10px; }
#menulaber li a { text-decoration: none; height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; }
#menulaber li a:link, #menulaber li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhujxo8j_EiVdY0KUXRv-lPorN5fAQka7i5EjSeagO9eZFWSRwtDRM0Wv2pY1LLhd6YEjLFc-lpjyu2czW9EdLOF-wviUBk6OlX-w6MZb7gZqNPvzysaQHgJHzPzwtLL6QH-gdGQdTgacNN/s1600/menu12-namkna-blogspot.gif); padding: 8px 0 0 20px; }
#menulaber li a:hover, #menulaber li #current { color: #257EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhujxo8j_EiVdY0KUXRv-lPorN5fAQka7i5EjSeagO9eZFWSRwtDRM0Wv2pY1LLhd6YEjLFc-lpjyu2czW9EdLOF-wviUBk6OlX-w6MZb7gZqNPvzysaQHgJHzPzwtLL6QH-gdGQdTgacNN/s1600/menu12-namkna-blogspot.gif) 0 -32px; padding: 8px 0 0 25px; }
#menulaber li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhujxo8j_EiVdY0KUXRv-lPorN5fAQka7i5EjSeagO9eZFWSRwtDRM0Wv2pY1LLhd6YEjLFc-lpjyu2czW9EdLOF-wviUBk6OlX-w6MZb7gZqNPvzysaQHgJHzPzwtLL6QH-gdGQdTgacNN/s1600/menu12-namkna-blogspot.gif) 0 -64px; padding: 8px 0 0 25px; } </style>
Mẫu 13<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; }
#menulaber 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; }
#menulaber li a:link, #menulaber li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSvxEvH-u9r_RLozhwJrhDwnAgLndGefE04uiQQQrCyB6UG7ovadBnZw6Q8_SniSLuv3eTHvxdwQFJOcibU6LVW9lI3EBeFP0YlysDb6Ha6HoczzQJKSFOePhWRFn8-SErddDMmwBCP7Xu/s1600/menu13-namkna-blogspot.gif) ; padding: 8px 0 0 20px; }
#menulaber li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSvxEvH-u9r_RLozhwJrhDwnAgLndGefE04uiQQQrCyB6UG7ovadBnZw6Q8_SniSLuv3eTHvxdwQFJOcibU6LVW9lI3EBeFP0YlysDb6Ha6HoczzQJKSFOePhWRFn8-SErddDMmwBCP7Xu/s1600/menu13-namkna-blogspot.gif) 0 -32px; padding: 8px 0 0 20px; } </style>
Mẫu 14<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; }
#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; }
#menulaber 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; }
#menulaber li a:link, #menu1 li a:visited { color: #E4D6CD; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwo54hDxFJsIJ2-jUEzAUQrcUt7n22xlTP-6dCOph96KQEdEJQp_Np976E8NY-pS_cZt4TuuHuEm5zivp64qgNpkHT9SnQesPDKZsfI-vcAe2dSeZq2x1OO_8gHaSwJ0ltn2TdcxNC-rY/s800/menu1.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwo54hDxFJsIJ2-jUEzAUQrcUt7n22xlTP-6dCOph96KQEdEJQp_Np976E8NY-pS_cZt4TuuHuEm5zivp64qgNpkHT9SnQesPDKZsfI-vcAe2dSeZq2x1OO_8gHaSwJ0ltn2TdcxNC-rY/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } </style>
Mẫu 15<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; }
#menulaber 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; }
#menulaber li a:link, #menulaber li a:visited { color: #8BADCF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3LvSdmx3ShBwoKvZ7mypf9geOIgw_6ZjebnaF1TD0U1jfjobwOW54kQIRKw1mRhdmVcDxLHlMsHHI4ToWBMCZGxKp8AkIvfuWMGOFoBPWu0kJy55x7dk0ZOhckY9xoB-JYb9HxkxzJbc/s800/menu3.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3LvSdmx3ShBwoKvZ7mypf9geOIgw_6ZjebnaF1TD0U1jfjobwOW54kQIRKw1mRhdmVcDxLHlMsHHI4ToWBMCZGxKp8AkIvfuWMGOFoBPWu0kJy55x7dk0ZOhckY9xoB-JYb9HxkxzJbc/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; } </style>
Mẫu 16<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; }
#menulaber 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; }
#menulaber li a:link, #menulaber li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkeLYsYB59WS9_v3rn9U22-oFTR1Zq9XsvrHrxZ0NwHKE8VMYGldQnukEodOoLHd5ehe8Q0YONzmc0uLH6XOuhYJCjsQDLOlvcu14OxtE7AC_BrzekCUwDWLJJd3k5eTXWdshiMyrqfCA/s400/menu11.gif); padding: 8px 0 0 25px; }
#menulaber li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkeLYsYB59WS9_v3rn9U22-oFTR1Zq9XsvrHrxZ0NwHKE8VMYGldQnukEodOoLHd5ehe8Q0YONzmc0uLH6XOuhYJCjsQDLOlvcu14OxtE7AC_BrzekCUwDWLJJd3k5eTXWdshiMyrqfCA/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; } </style>
Mẫu 17<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber { width: 20em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Tahoma, Arial, sans-serif; /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/ font-size : 10px; background-color: #90bade; color: #333; }
#menulaber ul { list-style: none; margin: 0; padding: 0; border: none; }
#menulaber li { border-bottom: 1px solid #90bade; margin: 0; list-style: none; list-style-image: none; }
#menulaber li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #menulaber li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }
#menulaber li #active { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }</style>
Mẫu 18<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; }
#menulaber 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; }
#menulaber li a:link, #menulaber li a:visited { color: #5E7830; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMU9s5W_LRmGqg-TeDXGD6xCuuUFe4bdqreuxuQgGrpihj7luWeGIlS6CRWahNdEp4Qh0QPqeQneZB5RXhclxBEwQA4iVcAE1Pr_SWta3xd-xYybg5dtGUu_r8d8-ruiGQQH7Pesjeylc/s800/menu1.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover, #menulaber li #current { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMU9s5W_LRmGqg-TeDXGD6xCuuUFe4bdqreuxuQgGrpihj7luWeGIlS6CRWahNdEp4Qh0QPqeQneZB5RXhclxBEwQA4iVcAE1Pr_SWta3xd-xYybg5dtGUu_r8d8-ruiGQQH7Pesjeylc/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }
#menulaber li a:active { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMU9s5W_LRmGqg-TeDXGD6xCuuUFe4bdqreuxuQgGrpihj7luWeGIlS6CRWahNdEp4Qh0QPqeQneZB5RXhclxBEwQA4iVcAE1Pr_SWta3xd-xYybg5dtGUu_r8d8-ruiGQQH7Pesjeylc/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; } </style>
Mẫu 19<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; }
#menulaber 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; }
#menulaber li a:link, #menulaber li a:visited { color: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOXxQkaz4C67QxbBrGanSidZcDAMtSOsEohG_y1A_NmgUyN2GwyhU67xrsSPiM3InBC6aAlOY2SsaU66LK3KU76uBfQWyhlVJNlQEmgtQ8HdKhbS25iSd2A1POhyphenhyphenwuHxAvzuAnwgQjASA/s800/menu2.gif); padding: 8px 0 0 30px; }
#menulaber li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOXxQkaz4C67QxbBrGanSidZcDAMtSOsEohG_y1A_NmgUyN2GwyhU67xrsSPiM3InBC6aAlOY2SsaU66LK3KU76uBfQWyhlVJNlQEmgtQ8HdKhbS25iSd2A1POhyphenhyphenwuHxAvzuAnwgQjASA/s800/menu2.gif) 0 -32px; padding: 8px 0 0 32px; } </style>
Mẫu 20<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; }
#menulaber 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; }
#menulaber li a:link, #menulaber li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUhlUco9x92P83ZLe0LmhSL_0bBErALPNI7YuACwVxMoL5B41EMzIQxUrPSzEyXX7AG4iKhnFstAv6A4wMG_GPnehA6VgSLNz3fV1vTVFgKCZLbwkADB2LV3oNmgZz_aO4XwTegLNcyIQ/s800/menu5.gif); padding: 8px 25px 0 10px; text-align: right; }
#menulaber li a:hover, #menu5 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUhlUco9x92P83ZLe0LmhSL_0bBErALPNI7YuACwVxMoL5B41EMzIQxUrPSzEyXX7AG4iKhnFstAv6A4wMG_GPnehA6VgSLNz3fV1vTVFgKCZLbwkADB2LV3oNmgZz_aO4XwTegLNcyIQ/s800/menu5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; }
#menulaber li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUhlUco9x92P83ZLe0LmhSL_0bBErALPNI7YuACwVxMoL5B41EMzIQxUrPSzEyXX7AG4iKhnFstAv6A4wMG_GPnehA6VgSLNz3fV1vTVFgKCZLbwkADB2LV3oNmgZz_aO4XwTegLNcyIQ/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; } </style>
Mẫu 21<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; }
#menulaber 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; }
#menulaber li a:link, #menulaber li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_kDkYze1PwlAs820B5q3S9RT8KxxvTTdBEXu7LCG4k7YiISZZD9QjhvHB2BXIcmaL1KBIEzSE6RC6qJ4MXTGZ02-UeZkDUScXo9QDflPUpI68vSqMxXERPsI5iJ5OgiUSESGN6l4Ykbk/s800/menu5.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_kDkYze1PwlAs820B5q3S9RT8KxxvTTdBEXu7LCG4k7YiISZZD9QjhvHB2BXIcmaL1KBIEzSE6RC6qJ4MXTGZ02-UeZkDUScXo9QDflPUpI68vSqMxXERPsI5iJ5OgiUSESGN6l4Ykbk/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; } </style>
Mẫu 22<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; }
#menulaber 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; }
#menulaber li a:link, #menulaber li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp1Xl4KsQ1gBMvKWF63747JytCVXCpXlxS_V0wKF2tIIBpstd1m6Xe8eR0a7KVTcHzcvUrwglY7iYLT8qW1WflOtStPryLBWZ4FTk8uxlJPLiEwMIH8gIhvik7avJ5n0J17kU-dJ6HHus/s800/menu4.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp1Xl4KsQ1gBMvKWF63747JytCVXCpXlxS_V0wKF2tIIBpstd1m6Xe8eR0a7KVTcHzcvUrwglY7iYLT8qW1WflOtStPryLBWZ4FTk8uxlJPLiEwMIH8gIhvik7avJ5n0J17kU-dJ6HHus/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; } </style>
Mẫu 23<div id="menulaber">
<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">Link 5</a></li>
</ul>
</div>
<style>#menulaber ul { list-style: none; margin: 0; padding: 0; }
#menulaber img { border: none; }
#menulaber { width: 200px; margin: 10px; }
#menulaber 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; }
#menulaber li a:link, #menulaber li a:visited { color: #4D4D4D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizm4zXAMv66-Ubd-Gu8ec4AiYB6vvbX7ZCllN49fUTfsjgP_gem9FcylY-iDFOI0ST2J962eN4d9wTZH2rhi5LQoSMg1uNZnzfGOL3Z7Eai1b4pQM5x79VaeK_3O8et6JGygkrwmQYvno/s800/menu10.gif); padding: 8px 0 0 10px; }
#menulaber li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizm4zXAMv66-Ubd-Gu8ec4AiYB6vvbX7ZCllN49fUTfsjgP_gem9FcylY-iDFOI0ST2J962eN4d9wTZH2rhi5LQoSMg1uNZnzfGOL3Z7Eai1b4pQM5x79VaeK_3O8et6JGygkrwmQYvno/s800/menu10.gif) 0 -32px; padding: 8px 0 0 10px; } </style>
