30 mẫu menu ngang cho blogger với CSS và HTML Codes ( phần 3)

Đăng bởi Admin | 14/10/13 | 0 nhận xét

Thu thuat vi tinh xin giới thiệu với bạn đọc 30 mẫu danh mục thực đơn ngang cho blog. bạn thoải mái lựa chọn theo ý thích. 

                                

Làm thế nào để Thêm Các menu Navigation Blogger?

Thêm menu lựa chọn của bạn để mẫu blogger của bạn theo các bước sau:

1. 1. Đăng nhập vào  Blogger> Layout
2. 2. Nhấp Thêm một tiện ích hoặc Thêm một yếu tố trang
3. 3. Chọn HTML / JavaScript 
4. 4. Đơn giản Dán Menu Mã trong ô HTML / JavaScript 
5. 5. Nhấn Save
6. 6. Kéo HTML / JavaScript widget và thả nó dưới Tiêu đề của Blog của bạn, như hình dưới đây:
   
   
   Để thay đổi các liên kết, chỉnh sửa một phần của HTML trong tất cả các mã dưới đây,
   
   
   <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>

   
   
   Thay thế các dấu thăng (#) với trang của bạn Liên kết / URL và thay thế Link1, Link2, link3 vv với tiêu đề cho trang của bạn. Nếu bạn muốn thêm hoặc xóa một tab nào đó thì chỉ cần thêm hoặc xóa dòng này,

   
   

   <li> <a href="#"> <span> Liên kết n </ span> </ a> </ p>

   Cuối cùng  nhấn save và xem kết quả trên blog của mình.

   
   

   Dưới đây  là code của  30 mẫu menu ngang cho blog ( phần 3): 

   
   
   
   

   Tabs 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/AVvXsEjggfHxmnTHND80DYnmbJqtwQY4quDaPYMFNWSqbKxRKTpWRGMc7uaAQy3Hnt7QJWvnWB-hhTz1OP1e1JOfFbjPWRlEhiy9rUq3wQLrOMuFEQIGUdC_hKwS7CRAznCoSvAUAvWBDjL3F4k/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/AVvXsEilvkMRjvdheRV1cKUVo7CxpONfWKIqA5Ro0oU9qJu_9-ZG3ic8R_XapJfpLnNBTjexJaUdUcZivEibCXT2edC-VJ9DuGuvO-UuxTtcYuV38VcIqAnb9ffOl2xWk51vtH2_1d_NNlNJZxI/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>


Tabs 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/AVvXsEjDEKM3lECcwQmQkin7NqYYuwdUFfxZPWX-N4SOlqAavVG79pzMuSnki1JotIq6Kln2a0esBSyQ257OBdtPU0P-9j87-zu13qcjQl-SY_tjDn1I0Nl8Ce_g1EW1qUvbYAk4ZlD4wirmo1c/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/AVvXsEgnTmXeDqzP8hB0pFvjDnCQyCF_FHUZLEl8mIyprOu6bFhp9Tb3FRRNr2t3TP3zEugyqUaEz9kNkeDt_5QClC6npeeeEaE79YqInWVL-wCLCpdlsS02xo-uYZhi6bMa08_xun922EcQwXw/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>


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


Tabs 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>Liddddnk 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>Linddddkdd 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>Linddddk 7</span></a></li> </ul> </div>


Tabs 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/AVvXsEgmIBE96ED7hhxSHgIt1hIlLTwQkQ9DihenUTfhJ5bMqH0leOg0vMd14SSPHiGQl0YiN8dAg1ygANB5xjw6tPqC077VVdg2v-P1Tya6xjfpCqR2cGoLNywhy5I4XID2RtGNT01Nmi22ID0/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/AVvXsEgRdyaKYMLeJuWqNK9lDIKjOr4i7QB_HgsN689Lq01by0f0457CPhyphenhyphenl9pSNgOUJTSmF4z2ZO9GmrYSrV82PvBrdoJHnckAnVR2Gsc9s0vf8sXdAp08cZaMPG-JUkMGzToi4YnEc5CzqoyM/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>


Tabs 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/AVvXsEj5N9Twy9gDSz7K7BPXr2usgZfUdDXMiijdq_jSQp34ftTgVjjuXsT7OnW49lpn1v7My2_NH-FPTucwhUCb6Ha9h1P8cooWIXOPfY7t_2_fU-16mu7f6dF0ZtpDYkm9DpTbUld7E4QdPsk/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/AVvXsEgWlnTRu_gZGYEShsAyCYrCH4A-C-inorV-wVFIJEi-FAUI31-BWIAchgRShyGNizoEhwObkk_Hgq_Ju_hlggI4e1KtrYyibCvuwR-15WWOpVQ2m2WhjuBZ2jxRsPpkQCzMLQqpRJZmqQw/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>


Tabs 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/AVvXsEi_yWOI1O9SGd_xcIndWHTnWr2MyXzA2k9X9yhWDW35HZPZWztGkmCxbUs4XH-wIxeQgluTpXRfiNLse6sc9CeH-Gi4Eh83_SoAYsG2Laof8IxOsEnnv7EBDlhHqNoyWOX33zqfpjDJSzw/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/AVvXsEglVuTsyaK5XhC4eIx7q1Q1klAUXZayfC1RdLRPhzxaJw2bhWIuXZxwJfr5VPtHYnIe5VrW1-jZOP2Bu4VlLJATHdx4I64ZvUf0Z7bqclRNwdofmUPiC5zkYWmK1VE1IKX1kDW0n4Gb9Gg/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>


Tabs 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/AVvXsEhidQeqI2yHqR5MsFuUoI469z1Tgg96tLz_BbLIRLxZIxH6OoM_B7RexgmAk3TfxlOWAjgpyJQsjFwraE30M3YK-FRajayc4O6TQO6a0Dsrl8JRXJONnnUfroJZSdRryZZINjU_64xayiI/s1600/tableft5.gif) 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/AVvXsEjk5kmEqB7lPtb1NgMZgbnJ-ntZfybxPPB3qpLhdOvUC57mAF-RVvBfdbWEZqGyXSeHLidi-QOCQhQfXsiuGovSnD1cMUk7YGoJ9cVpyrQ22Ahl3EcxU0vE-kjpa92ZtAJwdgMKUzR2Svo/s1600/tabright5.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>


Tabs 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/AVvXsEgEOHPm1uoUXpqFDO4BvWAvC0d7VKKU0sph7a-LGjJr8aiPzSKw5lLIaIrwzCkjMsBk2ouyHJoECNO-Ap9FwCvJ-YC0ZS47qIwLSScqneGxdk8x4tpwkNwZ73MZPZvCcIsTD7ZExOvVo9c/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/AVvXsEhWd6_5wUcqN-iPlzsYNnHLPGx9klRw3Bnqo7MKS4msTms_hNp5TehS-6Yz9LSYX9KzmOFon_mY8jTPkHJOpVNRkpkGp8RkenNvQWIEudHuEzzoI1a3UppBwEh6rvgw1ztRqYMBKxbyn0A/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>


Tabs 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/AVvXsEinIPpXoG_M2ufeRe5_bYwbKaQCV9IKI3r-b7MZfUfeb9yqeEHr0UYhLFz-S700CO9fVDOHwh-5O3ZpZ-8YKdtSxLL9E-W0eH80NK46AR8SjLCh-usg4D7ARySbKex1dfEARpqw4ZeMpFI/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/AVvXsEhoNyHesjY9UQr5yjeWDPZTIm4dxSDfYMCVmiu196hVDwKox2TW9vfxDqhbPwXcueZR3HHRl1bHUfUu1_RIS6jEM59ZpPnP2rIqfquP0-sP9G2HFi8uYEr6xjJl0nVha53SMQI4gRFPZYc/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>


Xem thêm:

30 mẫu menu ngang cho blogger với CSS và HTML Codes ( phần 1)

30 mẫu menu ngang cho blogger với CSS và HTML Codes ( phần 2)

                                                                        Nguồn tham khảo : bdlab.blogspot.com