18 févr. 2012

Ajouter Un Menu De Navigation Horizontal Dans Blogger

Ajouter Menu Navigation Horizontal Blogger
Ajouter un Menu de Navigation Horizontal à votre Blog Blogger.
Le menu de navigation est le cœur de tout page web car il offre le chemin vers toutes les pages importantes de votre Blog.
Je vous ai apporté un total de 30 menus de navigation de haute qualité avec leur codes HTML et CSS.
Il vous suffit de copier et coller les codes et c'est tout!





Comment Ajouter Un Menu De Navigation Horizontal Dans Blogger

Comme mentionné ci-dessus, il suffit de copier/coller le code du menu et le mettre dans un gadget HTML/JavaScript juste au dessous de l'en-tête de votre blog comme indiqué dans l'image suivante :
Add Gadget Blogger

Ensuite vous devez modifier cette partie du code HTML dans tous les codes ci-dessous :
<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>
Remplacer le signe # avec les liens/l'URLs des pages et Link 1 Link 2 ... avec les titres des pages.
Si vous souhaitez ajouter ou supprimer un onglet, il suffit d'ajouter ou de supprimer cette ligne :
<li><a href="#" ><span>Link n</span></a></li>

Menus De Navigation Horizontales HTML/CSS

Vous pouvez voir la démo des menus dans les liens suivants :
Live Démo 1
Live Démo 2

Menu De Navigation 1

Menu Horizontal 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 De Navigation 2

Menu Horizontal Navigation
<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 De Navigation 3

Tab Menu Horizontal
<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 De Navigation 4

Menu De Navigation 4
<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/AVvXsEigZA8D303kkfT9AsX3sl83UejeKMRY8nGQ0mhA3oWjtvY0vKJsp6A9GDZHlLclGZmjPdbVLQ0wlh4AptA-BEzCPFm7Q1jCcq8OZgeM05bEMGYakt71fb0VzCz1NinJenr54_tCIfvXPYw/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 De Navigation 5

Tab menu Navigation
<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/AVvXsEigZA8D303kkfT9AsX3sl83UejeKMRY8nGQ0mhA3oWjtvY0vKJsp6A9GDZHlLclGZmjPdbVLQ0wlh4AptA-BEzCPFm7Q1jCcq8OZgeM05bEMGYakt71fb0VzCz1NinJenr54_tCIfvXPYw/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 De Navigation 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/AVvXsEgmZ4CQgS8A73YMXZPKj2hHGfUd5qmA4alvGQm8dObJabE5n59TcY0sEbXTniBEswoFxn7s8ZdJxB7kILqxYTqHDouV1M9ene1UvjTkKCIBNVeKxrG9tPK2U1kBdnN2BDkYQt4syfCiCN0/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/AVvXsEgvwRTwKHEsZlV8cWesYCMr4Bp07T8Jg3J_OKylgeayPz6F4JsmjhjAWQG-o5_Ycy0edAJtY_Hva4UIUfKbIRWkWg0rwsjM98nppStan71Z9zymg8Y7Jh72XjaGCyRme0DIyNeh023fCi0/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 De Navigation 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/AVvXsEhA1DMm6PgwoSbpVf6nt42K4Wz1qb3vhONKnM2F8zRiUaUnT4RE8NNfPlu0AIH_GNw0OmeFzeHO0RbVKVndaYgmij9lghYKfVQFuYy-MERsdMx_g2_lRaKqKQnRZYNBamJ91_FByz1Rpuw/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/AVvXsEhzLMHfr0AFBGd4oaKqoI66wmGo28NqPdD0EM0vt4MUBFjAKMjIw3Y7VkpZX6dU1gFOu7z2-DPwBH02MPFIZQxm9Qec3dXVKEQm8RK7K7Lw-i-P3jYEQaA8-aYhuEKjx8sDenv3T5Bw5Rg/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 De Navigation 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/AVvXsEhdg5LOIMxEC0nmGa6io85VHct61s9l1Cpc9j4PTf55J0appYRIpGIKwuXe0bN-4msUwEEufTnqHV0CNxAiqVwBMuyd-BqzurTxxJiKousUJhtbzSd7f-dY_WgN4uhF3DLCyVrT72Ia4_M/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/AVvXsEhsmOJDY2OGPVyLz30uVwVWb6aIR1s_hKW5RNkp2QDHvSWI73ibA4hN_msrfSq6q1grmHjSsADKsIqV9OS1_94K9kBg1dHltIzYrFjzlu-TTM5__J31X9h_e-vZMMMSj-oSyJazqaG9z5E/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 De Navigation 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 De Navigation 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/AVvXsEg41ZxcEcdomfXuhCorpVxZOYKdARay46-3OvrbClyQaO_U3f1eJVt6vk4jSpzizyZjgoJke61JFzHUPMWCQOl2GxI5BK9ynwsvxclKukpju5Ti6rt6_4BOW0jmEdSAUZdYva9LPWLX-nk/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/AVvXsEiK0qIua3jJMJS9AmAK7ss8sXbwASk5jzrA7ur6__6Mgss8AVuePejaM9wa4Iz7DNn_lffgd1psNNDbaxTsK5NlPwl73IMgkVHJcquOOFVKIV1p1BW_ig2Z_xRFgiWOi6EG75LOkoBj12g/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 De Navigation 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/AVvXsEio2NfAX-cl9TKa2cpGCLliJSpe2t0RBpjfYK-ZmLkU5PMao36BJ13D0T7nCJBwWQOE6_Hjhpyt-1sJBYiAJqZfGAIFu9OKQg_NUCMcV247qNetu3qTd92OUF3q5TsGpJWFXc7Z7btGD9M/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/AVvXsEiTdrvE0K_mT0IskY5C9VtRV3WicKpVhqPSJLBynoNUah2dVlD2FTBBWDzicrt_C0TdGVk9mh4OO2lzzFZDjFdn74Fm-MsSwBRtEG-05sTXCl3M4pKIcdBPQ9YTUpl2BzhiYS25Pf2V1YU/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 De Navigation 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/AVvXsEhNgpXrfJwBaFXi134H5i-Xquubu4kyJtGLANLX6QcrXv0qXP8aZ_qVd_rlOahlB3Ud7yRFqfBGpZpC9z9yxFh8CY0b8zDpgWTSv0GxST0pFI2IDJlwHQ7IRwoMLhyphenhyphenOlDL_i19liFBemxA/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/AVvXsEh-WuZe17DAiSnTr0KNeA3zPDdGxjHGAjZbjzIPiB8tQr9WoTe65zo80yRlhm7UVnveMlNW7TH9mt5-RrHz6dryLazKEIUeA6_ah_B9TDsQ-8a2auo9s3pY8k2M3Mox6CfbslqB-09NKFo/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 De Navigation 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/AVvXsEjDyVC73ZVWz0Qd2MCT3dryRn3hJmGdWIJsmomQauZ3SGkv0qXAfEfqE3QQC2AWxQDL1aoaoCUZFzzMPB4Mabb8olKv7-kghGmXh409P0ikmUlriNjaktEOq1_xn1iwVUpmB7jrVBSxjn0/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/AVvXsEgWFaEcxv_zhWNxqDH1RW9dUUaOw9oEBGG4vJHkRbd-9p3iUVI2ZvD1x9b6lMluATnz1iAMreeNpevr8alzvF03Wwlcc66wjcbpVE9OCwpOGmukq6dAcUU-yXt4fcuG_WkTh4ERb7k-akI/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 De Navigation 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/AVvXsEhDBLQAasw8Sc3TSG9fQTBQMGJTYjjMtyg5Y9Ix8FSopvFdMsCCETKglBaUrSIa5Jy9X12uzf1S_zRbj6bB1ruigNl8skeLjkfWuuI-tlsZOLgaCIlbHOpAYdB_lFpaniXqizP9aD5tGGA/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/AVvXsEggmM5GQgP5KE3qLSllFTo7JMsAoZGmTvl8cnMLWbJH0oeEaiT5R8ds5D3IizVf0moN2jJX-m4zktwHb_ksVTzICjlIrvEjt1txh7YLHv1F0v3ZRkiCqxyOnjbb5f9xFn0IyXf4TBxUF28/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 De Navigation 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/AVvXsEht5PCBuE7SaQpH3Gpw333lLvdQAdMu3Cp1HSXk69yn47C94V5VwLd3LgvfFBDXbXvxoIYjNp8kbhQPE8BzB2UBDzfMEA7xA6zbbeXPGwn4jgzDZiPPYF6KSFKXBZ3t2NfBd0nwRmJP3xU/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/AVvXsEiGeZsGZr5h693mkuTY5KhbSa3nnfJJwn3fImBkn-FprtptvKqOH5uV9UHBZ_9c_3Bi3wPq0ZyOs3tOXitOV9rlTf47wLmFXTGMm8qxfFgQX4M6qXss42kxa2rFl_MRY6JklpER33winRA/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 De Navigation 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/AVvXsEiKl23DPvk74piyDVGvL6u1j07nU6HszioyDJGQe_1wKADA2zgSbD2MT5baqmwOyjlFG4TsIJVju-iwSnZTZdcNN2LifPm2hHAG0WRyt2Cfy5MP2RTWU_wkMMKNsR4qYo6rUiE4pmgUYUw/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/AVvXsEjZRNaKHDM4Pf3T4hXzNdbtLOin9R3hCEdw4-OIVVB1XUkEezmRfkSFjLA00PL195DdWcMxHG4i0Wk772i3XZuBMWcZKJb_BYq7p3wJNnkeXbHXhEAec7WBoa1bEzBvcrQpBNbD5PmmKDk/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 De Navigation 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/AVvXsEizVF_Lid6yFPLLiYMndM1oN6QFvpihjAdwYbiXaEQ_SMRhINTUHkyCXKyPfBCWhC3CoWV__45NJrzj5R513r6-0SqzRibtIkYIx_Tan3IcGus_b9kHcxISGm4xqJRviuLd95bwSbLE5bM/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/AVvXsEjItDV_4D9ISHo08KFAMv0TphuYTa-z13m93qediUGQxHB9WJSQvbI1XnYwVAoHyQmjg61RBpDBqlm9zc8tHumsMGpGYyxnlSIfRuE7OyElkgwAkZYuRVpGSmsuIRW18lD_14i0uY40K2s/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 De Navigation 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/AVvXsEjHSouju7fgsINA550pPghjAM0ATxb8JdomTpGx0cPAOlbMrt6a4Gaky8MhQV6_44J_GqRGftiFXhF8w-56ZQHU8F9dKQ327JyV2ytVRDxe0jn48eyTedIj8dZpUxZMFjW91eE2qdj2_8E/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/AVvXsEiTLjE6KFoPcBMhvVesOf2akU66-Nn4iyIFouOj58kgjHh_XsUQmML4YJw2IbZEwgAZitFHyOyL_6pe1PvMRP2eiwPzRk3m158O-R3A7H6sYR8z5SkE-h4eJMEjUGw6IG8mzA8yu1gKtPE/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 De Navigation 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/AVvXsEgGBju_SNsEVlTVesRlTl96kGzO4ZGTBsjfCJYzt6ohE-ztR14hXBsS6RwN0O-c-5IMnmenKuQAazIkA5SsHC2YLubgoa8wsNds7u9Ee5hfor06ya6xPA00-1Kkn1UwVu23lXWv1v4PDvc/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/AVvXsEhbny7j7_sctgK5qcSjeTiJHcTrVLcXzSvUb0jJXA3thoFkLCGOSAZl0BN9Lg-qrBnQqDKGUMXi8vFBbU33h3GpxZ7gIFK-sZ5Q-E-wC82UHB-bpusjbeW70Cp106rHU7TCixYjcyzWt5c/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 De Navigation 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/AVvXsEg2XhOLBMEAaINFvmHQ1SWmScZ12zXXbagSAZcR-noKuKdGix9QA2hDygJ4n9g5u7_xvIUzGWBkFOAdmDJUXdUjNhzVQS59Vs3Ge6xsRdc0VQ6krRFmrCaHT_StSZpzPfZjSmDqp9piym0/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/AVvXsEjUQR_EUWNN7DSRDVwD2CAH6I1mC6Jj9TXrCmBXSvXd83BBCgymAEP5x7hKqrSAdhsXHecMWrH3Gxd7xBnIQQAqCfArchPvzA3Am_c5o_sFCMmCctgMMgsFKrpLABVnZgU2DZIcQ2c2MIw/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 De Navigation 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/AVvXsEhYXwonJEPLxV_3aAV3Vx2oc16srw9rRwkulWn0GlpG7_CBaSqWLmiUfNFHgf40KPlJdC1kxSx6mkjOPwM6UKiiC7ZNJqMLJg8-sEDqhwNmiTbc7mZ0lz8zJjm2Nxml88GIz0pMuHQgxTY/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/AVvXsEh_bYW2keHwXp5dxyHt7JeWLoR38phEEByQvFxE2yGXO_6x5KogAHl5OaxbOvpvfuS2uA1AW2ETQAb5moWDKtTl5X4HpX-78x9U5njGBG5AG3edW4BkGGKu_GevvZ4qbfu-d3RxONySYO8/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 De Navigation 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/AVvXsEh2UgNjFY5Ks-F068KX_PEOBp0wZY6xeHYBOWYMraTAKuWXZETFzqAkFNXyqhjhjruZ30yJwTmQSvCilDaKq5gdWp_ARZ-X_RVSX58MK9bW2YxdkiTpcjlE6_udL5auZJpozZECdwsYoz0/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/AVvXsEgmVXDIb0IyGJSmKIqK_kZ6e48TnMq3YOni9URyBY7VxGI2n2FOPQWxCdNKU403eFPL2aHKQoSKR08rQ4DQYknwDX6x0p1bGNWne_hkr-FoprSxgy7gPhKjvCikFBdsvirwsEX835wN1J4/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 De Navigation 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 De Navigation 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>

Menu De Navigation 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/AVvXsEhKgGVoFOdFbb6JEi3XychXkiH272vgtPC96MytTrhLK4T94qkskIbBRsUsQHVdibP77HlR9eDI0UPYsKfAH_-HelDFA2wX1iy6VC0Y6sYA3QZeeTEMxxVMcTEDalmmtk_53Orh7eP68qM/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/AVvXsEgDDawddnHGW4Kj4igAaYs3pSufGc9NbDHHp-Y7D5aNP5I_DLB6rYKv1FzqijaeMk6KaY1QXvf4lMLAC414G5WFBjUm5qPx87qv6IiWTd1-MHxsgCb26ScfTT3VTl2UyLraSi-WVK5dbbA/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 De Navigation 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/AVvXsEhuamB-V1-ILunOYeXq92TMPh_k36wMCB6fokC208OcSiUadZP0gSqXGQ5U0AsGkuGE8teAryoFvKpdqTyq2H4JJqtGYbYE4vlMSlbKy-F_W7yVkduQjhzv03XxekI6zAckTQwmq7Jb4RU/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/AVvXsEhD4jVueEHSBOJ2FcoF7FF6mCksjnnjVlDrIW_W9v3zQeCpQvbFkbEWUuah0HLy8dX5xl07VivJdsm742raxXmX4qOsydFIwTZqgaNxxc9wukvmTS9PPZI4sxtA8HQa-Zhw9ar27ZH8DWo/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 De Navigation 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/AVvXsEib3vo1sZ_h8DnFQeIDvtGwt34zR7uViuX3FiYLy5Hm8CXEPwdnf6c2e5YYZhq0pJP0j7pKwbybMuKltTJ2t2ESZ8dN6uQirwdT7mJI8WtY-0drAq28hMKuWoBXx07pkA8rC1V9Ve2oi80/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/AVvXsEipZX5DBJrHhjkzaqJ6ec0ENgelJ12j8DHdPPUJxrSsdoNEbCBsvQaV3RzpZD56o3pFMTdSDfsjkNpwWOVmDAwuVZO14AtI4XoDJlXDlkLBewndTgDq3VJb79iW6EPco5OYcPeVGdf49WA/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 De Navigation 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/AVvXsEiOkIclwrCaosk2c4talenujQn2XQl_uYc3d5OjiBnV4CkOwdCenBCy8mEcVLXIQRomROmgQnXee4IuyIxMm7RRBCEcCtcXo7K8RNGbiFAXFMbnjvGgzrUQnCiJsGHzhaXSQCmbWC0RKaA/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/AVvXsEhL7GGxzlw3XOMZxKeSr7gLQhjJIjVA1xr7eicaDL5SccBencM0e6anTQlFiY9Dcoi-9vkyydZbxSOCtlCkvqONsKL5D2pfZbJcBONxUhgdL2kIlkvGRnFDmVogPrRPiw3aXT3NP6uh0Gg/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>

Menu De Navigation 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/AVvXsEhTy02MZgNaYNvllkqc2fbEVUxoNo1zJH3j8XUFrBjZRfzuJj3EQwoCFjgd04IRc-hpiCoezBWHvAjvTl0KqA4yOZWHHlMz3tYjtmGmHGpk276GioogeNDNa4o7KrPjR9ChM-tKVCvUKQI/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/AVvXsEhpDH0Y26uf_LxvaoZf7Fv4fNCWHjJ1SRW7StW_8_9EqiuYA5MdtRSYoMkf_Hb0Cmo_BC9A_Qcbk9VjwAqCfv5LIatYZpZhHMCPO2LgGsXwQKSo45eSqBjEvAMYAyOeYKs3hueXKQUnGWU/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 De Navigation 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/AVvXsEh32BTgqdSE57gETAzXU5__lDL4i-GcTyGU4z2l7CS4ul5EGOY0NUTugrNEXjCUM489wyker8t1waVlh1bxUZrF-XN2-XUAILM1uOyGjuXHe9OzBj-GMFgFe4IU7jH9PZBqG1ejvKKBgEE/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/AVvXsEh86xOAEfm9cjxdFXMJOlW1Yu2OsHqVYN5yiY9-FM7K8psZbUKUxCM30YolGCqrHVMcceiSPHFX3J-loINewO09t7-Pnh6CcDekzsw3eVaAO92oXfFmQai8DqBv8EUNdavekyqwyG7l3eg/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>

11 commentaires:

  1. ok mais comment je fait pour mettre mes articles ou du moins regroupé par catégorie d'articles

    http://artdutrading.blogspot.fr/

    RépondreSupprimer
  2. Bonjour Sam ,
    l'article suivant peut vous aider :

    http://theblogueur.blogspot.com/2012/03/articles-blogger-categorie-label.html

    RépondreSupprimer
  3. j'ai remplacé "#" par le libellés la page est vide, par l'url exemple:

    http://artdutrading.blogspot.com/2012/11/comprendre-la-saisonnalite.html

    la page est toujours vide, je ne sais vraiment pas comment faire ?

    RépondreSupprimer
  4. Vous avez remplacé les # par des libellés ou les liens des libellés ? c'est différent
    Si vous voulez faire extraire un libellé donné à partir d'un lien, vous devez remplacer le signe # avec l'adresse de ce lien qui prend la forme suivante :

    "http://Nom-De-Votre-Blog.blogspot.com/search/label/Nom-De- Libellé"

    Par exemple pour le libllé Humour de votre blog, l'url devra être comme ça :

    "http://artdutrading.blogspot.com/search/label/Humour"

    Cet url va afficher les 20 premiers articles du libellé. Pour limiter le nombre d'articles par page (par exemple on veut afficher 8 articles par page), utilisez donc l'url suivant :

    http://artdutrading.blogspot.com/search/label/Humour?&max-results=8

    n'oubliez surtout pas que les liens doivent être entre deux guillemets ' ' ou entre double guillemets " "

    autre remarque : vous utilisez un widget dont le code est périmé, essayer trouver et supprimer ce widget pour que la demande d'authentification disparaîtra.

    RépondreSupprimer
  5. merci sa marche déjà mieux, je vais maintenant me concentré sur le menu déroulant

    RépondreSupprimer
  6. Bonsoir, tout d'abord merci pour ce tuto!!!Grace a toi j'ai réussi a mettre le menu 17 sur mon blog:) Mais et oui il y a un mais, je ne comprends pas comment je peux me débrouiller pour qu'il soit en menu déroulant? J'ai bien vu ton post spéciale sur le déroulant mais si je change le code html, ça me modifie aussi ma barre de base. Je suppose qu'il doit falloir rajouter des codes dans le code non?
    Je sais pas si je suis très clair, je suis novice dans le monde de la blogosphère:)
    Merçi a toi
    ++ isi

    RépondreSupprimer
  7. Bonjour,
    je chercherais à créer un menu avec des sous catégories comme présenté sur votre blog

    Bien cordialement
    http://www.posephoto.net/

    RépondreSupprimer
  8. Pour avoir un rendu similaire, il est également possible d'utiliser la fonction Pages (dans l'espace d'administration il suffit de sélectionner "Pages" et d'indiquer de les afficher en Onglet et haut:
    Pour afficher une catégorie dans un onglet, il suffit alors de créer une page pointant sur l'url suivante : http://nomdublog.blogspot.com/search/label/nomdelacatégorie

    Super blog merci pour les conseils

    RépondreSupprimer
  9. Freeric !!!!!!!!!!!!!!!!! il faut ecrire quoi sur la pages ?? et comment iniquer e lafficher en onglet haut ???

    RépondreSupprimer