Senin, 21 Maret 2011

Sengeti, 21 Maret 2011

Cara Membuat Menu Horizontal Blogger

Udah lama saya ga posting tentang blog tutorial,
kali ini saya akan bagi-bagi cara buat membuat menu horizontal di blogger buat yang belum tau, yang saya kutip dari indahnya berbagi.
Ga tanggung - tanggung saya kasih 30 macam menu horizontal!!! Jadi bisa pilih sesuka hati deh...hehehe

Simak yuk caranya....

1. Log In ~~wordpress~~ Blogger
2. Masuk Rancangan >> Elemen Laman
3. Pilih Tambah Gadget di bawah header ( atau di atas header juga boleh, tergantung temen-temen) trus pilih HTML / Javascript
4. Copas semua code yang ada di dalam text area sesuai dengan menu horizontal pilihan temen-temen. (Akan saya berikan nanti di~~toilet~~ belakang)
5. Klik Save

Untuk mengeditnya :

Cari kode ini:

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

Penggunaan :

1. Ganti# dengan link teman-teman
2. Ganti Link 1, atau Link 2, atau Link 3, dan seterusnya dengan judul / title menu temen-temen

Nah, sekarang saatnya saya kasih 30 macam menu horizontal....

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

<style> #navcontainer { float:left; width:100%;  background:#fff; font: bold 7.5pt Verdana; line-height:normal;  border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; }  ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space:  nowrap; } ul#navlist li { float: left; font-family: verdana, arial,  sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0  4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9;  border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link {  margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px  solid #d1e3db; text-decoration: none; } ul#navlist li#active { color:  #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #666;  background-color: #fff; } </style> <div  id="navcontainer"><ul id="navlist"><li><a  href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link  2</span></a></li> <li><a href="#"><span>Link  3</span></a></li> <li><a href="#"><span>Link  4</span></a></li> <li><a href="#"><span>Link  5</span></a></li> <li><a href="#"><span>Link  6</span></a></li> <li><a href="#"><span>Link  7</span></a></li> </ul></div>

Menu 3

Menu 4

<style> #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img {  border: none; } #navcontainer { margin: 10px 0 0 30px; padding: 0;  height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0;  list-style-type: none; text-align: center; } #navcontainer ul li {  display: block; float: left; text-align: center; padding: 0; margin: 0; }  #navcontainer ul li a { background: #fff; width: 78px; height: 18px;  border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom:  1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0  5px 0; color: #666; text-decoration: none; display: block; text-align:  center; font: normal 10px/18px verdana; } #navcontainer ul li a:hover {  color: #6659A7; background: #eeeeee; } #navcontainer a:active {  background: #c60; color: #fff; } #navcontainer li#active a { background:  #c60; border: 1px solid #c60; color: #fff; } </style> <div  id="navcontainer"><ul id="navlist"><li><a  href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link  2</span></a></li> <li><a href="#"><span>Link  3</span></a></li> <li><a href="#"><span>Link  4</span></a></li> <li><a href="#"><span>Link  5</span></a></li> <li><a href="#"><span>Link  6</span></a></li> <li><a href="#"><span>Link  7</span></a></li> </ul></div>

Menu 5

<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(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvC_Xa-vHI/AAAAAAAACw0/qVeZI3gdWQM/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 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(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvBJiGpo6I/AAAAAAAACwM/9lKuhGGOk3E/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(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvBJn6pb9I/AAAAAAAACwQ/XVWOFI_3AgE/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 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(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvBBuaTrwI/AAAAAAAACv8/G3bPgs-Gu7U/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(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvBB8X5gTI/AAAAAAAACwA/fwleg9upasg/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 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(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5iiWmCI/AAAAAAAACv0/4lAk0jar62Q/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(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5jIWoBI/AAAAAAAACv4/1TJsSRUoYes/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 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 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(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5SCr4aI/AAAAAAAACvs/z9n_NmrOa5s/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(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5lGRr2I/AAAAAAAACvw/691UrUgNOOA/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 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(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvAqYEy5NI/AAAAAAAACvk/Upvw2dOoy3c/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(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvAqaCPITI/AAAAAAAACvo/6J1w2JWIlz0/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 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(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu_vhXlxhI/AAAAAAAACvE/mtaQIkLuioQ/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(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu_voDXE9I/AAAAAAAACvI/sVgxX67lkGc/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 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(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu_vcwCwaI/AAAAAAAACu8/HPBTqfggop8/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(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu_vbDU2PI/AAAAAAAACvA/k6O6JwDg614/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 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(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_knlQKBI/AAAAAAAACu0/8LiiBZnKfsw/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(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_k-9mnTI/AAAAAAAACu4/zgN8RBPo47g/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 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(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu_kvE0faI/AAAAAAAACus/SzckKvt6x20/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(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_kr6m1hI/AAAAAAAACuw/YTWQEYce98E/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 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(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-pxMSoZI/AAAAAAAACuU/PFY8xbrx6AQ/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(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-p0wRo5I/AAAAAAAACuY/T2KFLniEzcM/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 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(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_bd2bmRI/AAAAAAAACuk/Y174Kut0Ngs/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(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu_bixXsgI/AAAAAAAACuo/rQ1FvEtXTdI/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 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(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu_bRCaLKI/AAAAAAAACuc/YEWujpfd-sA/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(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu_bSCN0jI/AAAAAAAACug/0fWPrwxSe4s/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 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(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvBVzhRH_I/AAAAAAAACwc/wnL2j0dXKHM/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(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvBV1YKHfI/AAAAAAAACwg/3p1hsPWPSHI/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 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(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu-gCY1ZzI/AAAAAAAACuE/IYEaj-Ap9Bk/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(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu-gKkyHOI/AAAAAAAACuI/NpLTAFOd2uQ/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 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(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-fxTO5uI/AAAAAAAACt8/-Obicf3fMP0/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(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu-gDciBuI/AAAAAAAACuA/CQSbr-4_cGU/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 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(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu9PRHHGvI/AAAAAAAACt0/VowUBlNOh9g/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(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu9Pg-t39I/AAAAAAAACt4/Bc82ooHNWSA/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 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 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 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(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvBBx63ZtI/AAAAAAAACwE/lOu0RDcHs_c/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(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvBB9V8tWI/AAAAAAAACwI/rmnQz1WjK-g/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 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(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu9PCVjbFI/AAAAAAAACts/MclSzL8Aza4/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(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu9Pd4oqxI/AAAAAAAACtw/3ldOBb2QV-g/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 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(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvASky0MXI/AAAAAAAACvM/lCN12ooOQ_o/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(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvASjsu31I/AAAAAAAACvQ/h_VW2YzIljU/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 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(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu-pihZsRI/AAAAAAAACuM/M_WqlslWGI0/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(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu-ppvYxHI/AAAAAAAACuQ/aL8WsHpvlSo/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 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(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvASpRftuI/AAAAAAAACvU/Zu86nlwjvhQ/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(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvAS5-xgjI/AAAAAAAACvY/f0YjqMbxzqY/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 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(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvBJ_dMfYI/AAAAAAAACwU/ROgYM1pOzzo/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(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvBJ7Gdz_I/AAAAAAAACwY/o6Vlnp00pyk/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>

Selamat mencoba!!!

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)