Poetra Tasik: menu Navigasi Horizontal Blogger 3

Menu Navigasi Horizontal Bag. III # 21- # 30

Menu Navigasi Horizontal # 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/AVvXsEi67D7Hh99WfBJcQPWQolvqSGmHRlOoephyphenhyphenruEBFEOucl8Z8SA8gEj6XCzFofzzt9UZGymYezoInc5HxC-i2f1-DiRR5T6acQVmgURe7noKksHL8bl6UakwrkKwVe9JTEGmOHJOZWYL6ks/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/AVvXsEhFbx9FZ8t1JEIYRFePQI5SsM9_coEFi0gaa1V1xLlalxarx4qIS0R7JCgBevW0dqlKkuwNo3HW8RBb0Z_vhrfWUNjXEAgijLZFbrPikh1nnvGcv0kX_J5Um8vID5hKaMa3bwiTvtk_MIo/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 Navigasi Horizontal # 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/AVvXsEggfzlIJ5FH9Jq9A0dsqeV_BN0l4oLOirNcC_AlHEuhfsDKfcPJmS5lRh5JkgEEGG4Dhcd4sdkOYF9-FW7pyv7PxZGouUhE6ZHvWqdVJdrxa-uFHfvDR10RfXiBRBlUnPdsAPkGA-qMTAM/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/AVvXsEgq7M4MWs4kBhcFdzEofsB7_ZHxlR76ikcc0j50IFdjlXazJeEwyM89XmjrIPlaPp1xbD2TzIo5SLpwehr4-yppwN2qBQ7TBUtYeSdOVHT7F_4p9wxWpvfAEB2JkwiFu-NKRw7op-VonkU/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 Navigasi Horizontal # 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 Navigasi Horizontal # 24

<style> 
#navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 
.2em 0; font-family: georgia, serif; text-transform: uppercase; 
font-size: 14px; } /* to stretch the container div to contain floated 
list */ #navcontainer:after { content: "."; display: block; line-height:
 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; 
padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist 
li { display: block; float: left; margin: 0; padding-bottom: 2px; } 
ul#navlist li a { display: block; width: 100%; padding: 0.5em; 
border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: 
solid; color: #777; text-decoration: none; background: #f7f2ea; } 
#navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a
 { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, 
ul#navlist li#active a:hover { color: #800000; background: transparent; 
border-color: #aaab9c #fff #fff #ccc; } </style> <div 
id="navcontainer"> <ul id="navlist"> <li><a 
href="#"><span>Link 1</span></a></li> 
<li><a href="#"><span>Link 
2</span></a></li> <li><a 
href="#"><span>Link 3</span></a></li> 
<li><a href="#"><span>Link 4</span></a></li> <li><a 
href="#"><span>Link 5</span></a></li> 
<li><a href="#"><span>Link 
6</span></a></li> <li><a 
href="#"><span>Link 7</span></a></li> 
</ul> </div>

Menu Navigasi Horizontal # 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/AVvXsEjCrJ7VFSdwRe9s-tKlmKfPsuoJAEYbw4CG2_xOwvIZvhn5uSOWv6UDEAPLFBqtVv5OSDF3i91umLuJgLYQp2gCC2KeawDBOlABOWpCiUCS5qW9GdiHImKoil8_kfGzwfU3tKzf5Ngkf2A/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/AVvXsEi4Ek04bGk86BXLsnrRA22bJfCk16LHan-Or2S-pR3FqWiOkXZQjZLUZW8a6-dq5mw57uQdWnaCEJXv8blcKbT5npC1ZhVywib915SB0gXHdhH1cFR2TuR1khyZBVSlVls2lwh72zSmJNA/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 Navigasi Horizontal # 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/AVvXsEh3rUbj1nSyhckvlGllVDOL_D8hZFyvq70U5Mup-NHJw0nNPxjs5EDX_Va-3U6pkAmK3uDyIvIR8qPz2x8kKufxxXYegXW7Xq70TOhwAxGOrOGbcnd6c8VDcdtGdE8pLpaZ5666C6ZME1s/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/AVvXsEjIqOS6VKdiDB4fuQCOSLaIiZc-rHBTO0DxaujSqNYky2DOEcr9Md5ErpZyfcBH-1rDaJrHgEBfQSIs15SRxQfg5tQ9c65es7k6xBmdJTfWrgiXjbobWFDRytiYIBMEDAYytAKVC4JJnTA/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 Navigasi Horizontal # 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/AVvXsEitys_J_RKuuHyu8aV03_attLPXAJryC5RsT7iE7bYXAcdvWaSEUEmsbSaIPoU_Ngx9IhaFi0RH42zamSzpYsJSDpPzNA3pikNQCc-jAJVIM4oQhQSDVC2JQSee6-q9fNf8_JUhKclW1zU/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/AVvXsEjxdxijui3Sg5YhJ3NrdhFmczbgFGIiQ2KXiA2gQAZppxsCwn5U36p0hnTH6HjDTa2trbFMJwegBTLLKpRXCtGjiMhyphenhyphenzfL-q7AMIoINaASwUz4hYkiYDGFE4KJ8RibEzEmAjmDdiRhvxzs/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 Navigasi Horizontal # 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/AVvXsEjEy1TuFGkykIyEBztLEUPE6r9DRQPMKO0HT2Dyb_-E9jZPq40olutWzt7IeXptx1_UJq5Yl6stYUDKY8LCnlES7WTo2NQsgQbllzEcPM4dF0ZkVs-q3uGdidR-WyCtv8xaXqFhqkBhTyE/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/AVvXsEgJ7gyHZ7RD6thWI0SlHbiKBGBKr-AkUNF8o1l7m7e-Dc-TgTwRWvpi0FZJDDAO1_qzECDPQOnkKupHT2UJrzHDMnCxZezqVzGQ-T4n9giS8nRqiLOJIobHkAI9gGUiEfp7HFquuMNKVNw/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 Navigasi Horizontal # 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/AVvXsEg8GTI46GwOTNxk3spwU_d6QJ43iz9S7UVLEppoi99494Vw1Iyphy-j-wMSbeFC8NJaaimZe0mKwwXYGkdU5CBgGJ1UMxvNqTNq_bCbgswnT7-ryOnm0RmUi-Z5ULhs8vy37joKw1x41eQ/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/AVvXsEiWJ1Y-a0qRT67t55coS803z35jc29fkEZ2mi_tiq9uMFhGAPbobWTus3B_sWTkjKAyGneK0mmXHvePC5ZDdkgICv0yx80QygSOi24vIEyW5enRV0vjdV4R8vrNyheq3l3hKVHnGiNzEfs/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 Navigasi Horizontal # 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/AVvXsEiTrWS0_G4THLau0oG8LQfKpxdy6AmxNiH_YcN-X0paps1SGfOrGL-6CxmK5smOTOoZVn8Xko4zir2VV_tAU_u2321IkUgejLyaEdi0_Vj_0Oy3NbXyMasuUOfx0fF1GYUCxNUuDPHbWBU/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/AVvXsEie9W-5Df8f7nKuqYzr1bjdt_yOW6ZUfC0dx4wMsFMciaLPZ1yZnXDeBR8hUlxPGorMzd4H3VAdbzGmfHaVoKaC36sgjDsff4oLBAi26G_YACcvjZO_nCV59IxESLHlCAQmMQCrKKFhmAc/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>

Itulah Menu Menu Navigasi Horizontal Bag I, Bag II, Bag III yang saya kumpulkan dan sedikit memodifikasi kode CSS, agar bisa digunakan atau Anda pilih salah satunya untuk dipasang pada blog sobat di Blogger.

Semoga Bermanfaat !!!

Poetra Tasik

menu Navigasi Horizontal Blogger 3

Menu Navigasi Horizontal Bag. III # 21- # 30

No comments:

Post a Comment

menu Navigasi Horizontal Blogger 3

Menu Navigasi Horizontal Bag. III # 21- # 30

No comments:

Post a Comment

Subscribe To: