Macam-macam Tab Menu Horizontal dan Cara Memasang Tab Menu Horizontal pada Blog

 Mungkin ada diantara teman-teman blogger yang menemukan kesulitan dalam meletakkan kode CSS pada tahapan pengeditan template, untuk itu pada postingan kali ini saya mencoba memberikan solusi ringan berupa sajian 30 tab menu horizontal instant yang siap pakai hanya dengan menambahkan gadget HTML/JavaScript dan meletakkan kode tab pada konten, sekaligus menekankan akan urgennya fungsi tab navigation pada sebuah template.

Langkah-langkah membuat tab menu navigation horizontal

1. Dalam keadaan sig in pada account blogger sobat, pada dasbor => klik Tata Letak=> klik Elemen Halaman

2. Klik Tambah Gadget pada kolom elemen halaman dibawah header atau diatas header

2. Pilih HTML/JavaScript

3. Copy semuae kode tab yang terdapat dalam teks area dibawah tab navigator horizontal pilihan sobat dan paste pada kolom konten

Untuk mengganti link, edit pada bagian HTML semua kode seperti berikut:

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

ganti kode (#) dengan halaman link sobat dan ganti Link1, Link2, Link3 dan seterusnya dengan titel halaman jika ingin menambahkan atau menghapus sebuah tab, sobat tinggal menambahkan atau menghapus bagian baris kode berikut:

<li><a href="#" ><span>Link n</span></a></li>

4. Terakhir jangan lupa simpan dan simpan. Lihat hasilnya pada blog.
Berikut kode 30 tab menu navigasi horizontal

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

MBT Navigation 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>
MBT Navigation Menu #3

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

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

MBT Navigation 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVnaV2Zd28sK_qf8e7akzK0tUPkSAnKCWwYj4We_opWlkQiqAtFfZSnHg_QGXd8Eu70vWmS7BhmO7WBUwydHWaGWgZtWetVl1V17L6k4f6CkSd1ApukWtVHV-LSz-D2bHqQsYHwFN7A0s/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>

Tabs 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9bgpNp0kHI6DDNQeLr9IZm0MZwZxg85x84g-sZheZsg6NPAOyLCvx7dVcTfU3j_NQ1ZLGZdmE31WOGm7_Jel0nkCYKPmhldnj4BFOtuSqlBA8UQXqeUViXj1Kl3SBjqj5zpWO9xlgrp4/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/AVvXsEhAyvAplH8lFEsTFqaDvDDgLVK84crL23fZL-kf5j9kJIrC87KSDRipkVbVAO-NWhuQNsuBPQHfTZqdSq_KOU52cEyoXAfVQrsSgGYxBL6Q6K04X13P_13LEKRmFlvxseCQ780qQZG7STY/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>

Tabs 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZz9eImhLMAyv-KQf3RurSh1KQAXsX-BhCGP23z2pLmQyD23D4tUuJ9DgySCG2XIj5j5PosZ2IjJJx5ZsfR8Wfp81rR-BRG2rIub0dlOmY5qsOOSY5IiyFrQLreE3eR5rPTsTIZI-OCdo/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/AVvXsEiCmIzNdpJFR8GARPG-Z9qTOZE4fNc6tlJp3oiN3DfgZPr-zVBtTtN68NWJW49Jl-Pipw4GKcB_C9gOGMCUsYJDYWNrcTBj_bEVDGubF0JCQWmigq1it93o9GXLM-QgaMjnNL_Aoz8ECSE/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>

Tabs 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhmOXibNVBmPpj9E_w37_BGGtWYdSZ4KqIsSO3m32pvqKTuym5LwETjXpOG5fuI3oDD5C2PvIrjqzkwGx6aSOaxYP_7G-uBQnKj9hfyeSGmNwiDBZikFZr6XOJ6xbOYRIDH1mfB9Rlk88/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/AVvXsEgsj_qJ7ZHDKnFTA4Is3dhN5PDrdyQex6ja1HmDGfEAx1g-KJ1O3a6IG3vMpX1GthVyOO9YIeEhWvBhJmRjE1M7Oy7D0BTTOFQnKS6vYLZjDKIediu8xY6WA0E-eJMSTY5mzLXjtEI9JQs/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>

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

Tabs 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqPkPV4Da7w0M3dlsiqUCb40Q15yvTvixJLbfI-EdaAtIgyFYQGQwEVfempzAHFzV2snnjR5os7owtNihlEpvl8z6K1MJ5KdTFUjZ-Nh7rRpjCe47dp9khhtgAF-_MSVAu2Y1WxEo3bHQ/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/AVvXsEi66ffYiQm6THnXLSXm0o5ZzQ29R_zDvhved2mPlHDvjPnsKJ8BEX1FWHWpmH066w1L_qZu5GZ66Y24vDMyv2WkA1eaHvT-YWh91-uCu6hxVOd49F5IcfVk_GbtrGsXDvtefX0Oc_29LyA/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>

Tabs 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjukSIThjNfFhQRh5EzzYGnoBRGJiKbvRDacm-F_KH_9CBk6SmUZGHFhylUjc-UHAVvnt3YY51KtZXJ4DTl4mVeukQoGnTTSBX9UKTl9GW2olv_7liemIH9Xm5Lr3xH8TEQAk-qynPqwVI/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/AVvXsEhBSlTYRNnZCh6VDRpm6wtFbpVRya1-itZS65UxKnSVwUv-8UXdbu4o1wAu0krg-OtUpM-Aan8nPzaPqzEnsz_4PNlICooB-PUEIgHPg6S8cyNJIDigTn50p9EnvQ_Sj1BO_2rtSksBmxU/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>

Tabs 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpIRkmz6HfXSUUJGX8w1fF7p9DSjtGDC8FCsvQorqv73z8kNwOud7lUE7YcTwJZcOH9Y-BUKh29SrF3DNVaRb4Fdl89NK7WAC0y-ntzuOe34a03ZVoltJnRWp_l4Mc7EZuKO8AK0Av8PQ/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/AVvXsEiDEfj7_NJ7YfxozqgYqf1CpgYWjrnYXnRm-M2CC5v2-Qwj5rplcuKY5m64DwUHcF9FIFxQ8_992RoXRs7u8I65czJZSTveORYYQsUsh5S6uNcCkhyphenhyphenp1afttvXhSxLjt94LBYsvJBDHXnU/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>

Tabs 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM6Ij2vJZVPS68X8kf2OrL7rUPR3w6PEUKanlaq6Avh6I3T5qS6ySgGaalLEXBWTmHlBG7TZJLXFvsNNSR0G0MyIprzhjESEHPD3n4HDwh_rRnXHXO-rCOVkDwUZ3tRb5Ravt1wYUtq-k/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/AVvXsEg_HaJN94rvsygz6e7c225SM-500joTrZS-Z4L5mQJlueicSvaCmkXF01MYKp-yAVRcGdXizLfXjLM2kXjgr70ryXhgWn8kUZEqrYle-dzS1dbVMHcYmLPpOiD1gIwUMsO1nc7lWXanbhU/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>

Tabs 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXy23DbJ9B23nre-KBE12dHlV_FKn-BMI5ze9KzHd3yZYcvwcZrUX50E_vXzqLWWK9wlFjpbIahYut4qDSv885usIxPePOW6QqmzR1zQH9jrxhWTmpD7JR6OoAyyut8xShzui0dsofUOo/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/AVvXsEgpwUwgUY7ePpf2OH4f2QyGT-8XcZsT3EQ81_QNLipIr9hvcrFD4sV2JX8VNE_Z81L6J__kztVdhxT0tPnB7TOUYn5qMQ0xt0pRxH2njfzwlZux0I_wOioU3xty4FWiu3YMmaIgxo8bn_w/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>

Tabs 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMS8i9AL8swHTUWDCaaYre3Aj9dkX4FQMVSohrHtuqbV_VUmCzYVenOFsW0ZOsY2QM4TfUj0klBvB5FFsUNZDw1L43q8aD7e5Dr3VY4B4okVihARTcJhz_Ha0-hEgY_lJ-XTETqHvM49M/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/AVvXsEgV284wMu-w5zZs6taGHMHZQMuaDmr6WA6cYCFJgALu6asTNMNWyy3IVEHRUzVwmX9KBEbX_YP_hugAjLnxFDNq8tsSnqCmx8I3seHZVZEyqniRIniRCwEoL32llzm4634MpaaknOYW_88/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>

Tabs 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipaIv3iMhGH-w1v74bFyIH0YujL7Iwy6fnHqnJxF_Kws3ZXvqnNcpYUoL6Ir4Uy6r1S_7nw8a0B634hPXHzEudkXjDyvHBESjrbHCmooAdr8QzQdsZet40mnIK4vTFEpLd1zTKRwrLmlg/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/AVvXsEilGYua0pAn6Ts05utKdRNIcBahSzmYEvla6f4tvOcXtvrFM2WNid2Tf9VzZZc1cEz9bv2H3Z_SHZcFIYGixFGwcTi6Z9BW8HZfCEBmgqcr8QZ52FPXvHVrWkMGnrhnvQE5Ex6GbYHRq6o/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>

Tabs 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiinrwy22FQodr_W8eKmLaoGEmYJOnFEB0K6AgJswf2o1bELFgGYJi6Vjd3rTDKzBKJgdjE2BXX6D7x_BGmFF4XVICFQCdEBMRPYFgAziWz-76RweK2H4JxUKev8v-3c4AJQOHoswm4Yx0/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/AVvXsEgfNb7UPTACMRTUvmYAjBsJhK3gyzXrit2iWxRrmblUEP4J0YBEgtptl-fl_HSYkeadhffeyeJQviJ8ulrUmDIhjSonR_HOmtP6lx1C_yFU8X0twC9hXaXAc_YUX87oRtb8InVZSXPCPno/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>

Tabs 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQzktWBNTUev3rhc1F2DLGShvqzKqhMyY7YeIJ4W9kbNIHD9LqaoFBa-F0hUGHziSEsOhGdtMA-LlIRBCFDsN8wumkJpCnTziWXNZRWma87htGSwUw5ihosyKOKyupLc-E62b_NkKhIwc/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/AVvXsEh15pSEE_AzMFyb5FKgKEjZbGOLJiYumzMBVxRSSpc0xM_vvGgcrtgwD0TAbu24PTT2AHI8LCpPoe-yiPWIdLj0ixSxN4_zatsq8Vo57YzyQi65H-LMRQ5sqG0i55FvYG7rit1flDVK33c/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>

Tabs 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhewO-e8dEd_z3IgNVWiXKpa4vMYos0gf66Bik5LxWmgRSPcyfsq-U_E-hFPp1kl1u-SrTKpbjJTkj8W1xBCsSyT81J5cIkyF_C4ZYiKL7fkQ-gBSkiDGUxd_BMr4hbFnUBarESJnOxKtU/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/AVvXsEhV3Y7nnQ9Opv0Fn_pN5j8CEjkVvnFpLlDUOJsMaOGGbe_2FuGNUWUhv7NOfg2ExHYPV3kF97OL4nFrPSDtECXcM1Rn7jl8s-CML7TOTo6_l3sgIMje3_M4IxbWfmuQQ2sTGy0puqxN6MY/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>

Tabs 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLVqcFOsfokb6ovGy4pa8T3TTFJn7VFBJ_r5fAuGgvB8bg-4W1Opnm-ERrvAuoJj_JJwr0yOdcEg2Qc7STs9AFQ0mjwqKvHku2f_mq-S0qd33EBWdbDGoMFTBcXXWFcqLta1B3S40gNhE/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/AVvXsEi-TQJ1mNWj1S-2bhh3Xt4Uhyygld6ziaq5pwuUqIrwZZ6SNSPqDzA6ToDPDgflxW-_UQaz9AMBgN8UAgo14uHWiwrFgFpTLCpb2KUMtEPy1GSytLpVyH-kInq2IBhe3aodN7gDWlRzyQI/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>

Tabs Menu #21
 

<style> #tabs3 img { border: none; } #tabs3 { float:left; width:100%; background:#E4E6EB; font: bold 7.5pt Verdana; line-height:normal; } #tabs3 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs3 li { display:inline; margin:0; padding:0; } #tabs3 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJswdK-tL9BY2cV5-tPNm6WukMPeJ4oKaqIcCV9-zU4LogDxfkz49yU7qyUjzNRbD_GO9LFO84d1pWVjwkC6MP23KdxGtuxutIpKO8G3f4uVvXVO7uIZvRI-AA7E_T5jm_fQx2zfwzyvw/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/AVvXsEhDXGmkIAY9F914RVCielcPadJKNLOF-0YKzqcxxez0K9JGnxSjF6eY2TvMTK7b12Yeq4q7OB7IO7OTBov3sLKRR4_9FFxOclyZNioCP0NlgeGrIjulJ259enJqMzqjALq7OpvVI5c6cwM/s1600/tabright3.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs3 a span {float:none;} /* End IE5-Mac hack */ #tabs3 a:hover span { color:#FFF; } #tabs3 a:hover { background-position:0% -42px; } #tabs3 a:hover span { background-position:100% -42px; } #tabs3 #current a { background-position:0% -42px; } #tabs3 #current a span { background-position:100% -42px; } </style> <div id="tabs3"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #22
 

<style> #tabs2 img { border: none; } #tabs2 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #84776B; } #tabs2 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs2 li { display:inline; margin:0; padding:0; } #tabs2 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEPHzdu0jyM4dh-PFyCH2qx1va2bzSTURKYkFQUS_9DaupbSR9oEqmuRW1vHw_BnkjHIWdKU4fmNAp_iypnG8jTjzKiymUf-vwahkyjPtBOppU6VmjXdNCdvYab3GQRsgUk-msthzRTKI/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/AVvXsEg9Kwca5ul9ndj2FpwZUHKogbuOCDfdIkEVtgcXRPBQ7t1k1ovxcRRDYOzOBcTyaobH1A1H6r0qULorZHdsM7BND-UGJQ2Qe_NdBRx0x0q3pabafAIS-yfmUsUuD3SgmJyZPvWEKWLKaE8/s1600/tabright2.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#84776B; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs2 a span {float:none;} /* End IE5-Mac hack */ #tabs2 a:hover span { color:#74675B; } #tabs2 a:hover { background-position:0% -42px; } #tabs2 a:hover span { background-position:100% -42px; } #tabs2 #current a { background-position:0% -42px; } #tabs2 #current a span { background-position:100% -42px; } </style> <div id="tabs2"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #23

<style> .container { width: 500px; padding: 15px; margin: 3px 0 20px 0; border: 1px solid #ccc; background: #fff; } /* square */ #navSquare { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; } #navSquare li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navSquare a:link, #navSquare a:visited { float: left; font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; } #navSquare a:link.active, #navSquare a:visited.active, #navSquare a:hover { color: #000; background: url(file://localhost/C:/Program%20Files/CSS%20Tab%20Designer%202/styles/Square/Square.gif) no-repeat bottom center; } </style> <div class="container"> <ul id="navSquare"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #24

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

Tabs Menu #25

<style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSUgdTfZ4WYd-wL21towHxvlKHu2pjvlSkL2FrB9t1khEl8M6j8WJAzA57T34bxpRCSbPKYYxS9mxNKrCwBOAVlEb_j6K9HLCtLsscnyeEudveLPnNLzaq-uT0MdcBbj1B-wyYh7SJ5tE/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/AVvXsEiiqdx2P_rUNKgtdgA3w0z3F4emMzZqThtwdyU0H5EiFLb-afs9HIzZ1LDHcknwUiGb2izUaxcz5qIzGh05LcizBJJSoMUs-oH4DDggw0sipVZCAu34BfjGXb8Y84jQO2PqnoELTFKMMWg/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #26
 

<style> #tabs1 img { border: none; } #tabs1 { float:left; width:100%; background:#F4F7FB; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYqGhoBdadfUmR6qRXBfAubGTdCduVmVt2hN1xgrafonYLlSOUxc62TBxpDK70lP8iqbElF1MuCslrsL3C-G8TOcYLV0IyUwF6iVBXMzMfvVAljxAoqX9yQT71P4AZ_wNYU3kLHre4Aw/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/AVvXsEhI0SlKLiLnSor35JW0r45Qa7R-C4nRff-LTBTkroCYMRRt8Pj92alSXOkCsUKvXMztDTfoH1bRSrmoH2M1aVTTtn3m_IYK_G_Ws48EnrBmDiMtX6mIPol0BeEZ9QqbDwfdy-YxExqVDb8/s1600/tabright1.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px; } #tabs1 #current a { background-position:0% -42px; } #tabs1 #current a span { background-position:100% -42px; } </style> <div id="tabs1"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #27
 

<style> #tabs { float:left; width:100%; background:#BBD9EE; font: bold 7.5pt Verdana; line-height:normal; } #tabs ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIO_wxB74Gv80iMyjgAXWz5yav6tgHhi5Dfk7QjrpyDc5PEVYjIonCtABwgc6kzbtDzVtHBLgXAq3wNUlkir5g6eqh9aOuZHyZm1ou2cht2deYuCNXRiD8pj6QPgUSEc5KTOOD4T5ohO8/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/AVvXsEj6Ff_0gy9p-286w5R4DJSf4ofp4X8Qh_Zs-kE1-qniBa4-zZv68cYlq_EXt2tHD_il0KHjMoY1yL-37PhDjYJvntWnN_d_dmRNERYDpTzF6g2X9S_LYhFVMxq1kcsuEWzwnjtY3orTBiA/s1600/tabright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#FF9834; } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; } </style> <div id="tabs"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #28

<style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHXJ01G23NkWpDi4zXwLvp0GPLczlDxg3eXhcd0jEhZUp1JS_cGuhosYzfdoiB5wFMEp-rEr-3Hdis2HHLU6JL6bAnfjV8pTYmc7ncwhgiBGdVkrL4OfjgzjKZCBh-SWTg42M8OUSnKF8/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/AVvXsEifUNiKAUPzJiSF7EFScONOrB8fyg4Tpy8bxzZXY-ZYLwztd5txtHvjLKYhEKZRYgmETmJ8NTg1tAIjOxd1d2sawFyJkuDpkOoMaurdhCEB5ctQ3BeRTQSoIZauCFZq9cqNcY9K98uA89c/s1600/tabright5.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs5 a span {float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background-position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-position:100% -42px; } </style> <div id="tabs5"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #29
 

<style> #tabsB { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; } #tabsB ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsB li { display:inline; margin:0; padding:0; } #tabsB a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgoLEk7bg3l5H_QJAQdgJAa-fAHulITLLIPxQcpRORR-7s9yeGFoIBi9Z1Eaz5GTWUwKSLXPZBNJ4ovvPwK4Cns7Og1y2vnteYyQLx8GmIhn0aNR_ojFLRsqyBJY0FqXaT8UhxcM14Pjs/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/AVvXsEhjQOVLm2SrufkJ2ic8993Elu2XGnktWU-XUoyCC6CB9GU3kPanBT6VPMc-X2wSiQVCgXerLEOBDQCGdG8rWZQB7ezFn0xzO8qPuFzK1_XMRU5su_WG02C1Db8E3bMEmNrpYo-3-W8fW8c/s1600/tabrightB.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsB a span {float:none;} /* End IE5-Mac hack */ #tabsB a:hover span { color:#000; } #tabsB a:hover { background-position:0% -42px; } #tabsB a:hover span { background-position:100% -42px; } </style> <div id="tabsB"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Tabs Menu #30

<style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzRdh9T8yIv4mCCC4m1Xu_OZUjyBVXGV9EFB4QoC-U83nrLNmiMlzmy0oPayrAnMtNy0jfbGYUx2ynns2XMjKheOmpRyJj1SWSnXZ1sFV88LxshNkw9mXSSOss1d7MLvT_IatdZPoqgMs/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/AVvXsEhSkbxJevmsefHoLJZkjFFHkxOHOunT8SxV-Xwy2fxFEWTlnHN-SKxgr4M-j_FVRlfxWXRSBydSHcH4uohx6EnOyCNNCuzi2x2cxGivkXXBBo0ATfTlty5Ja5lo5ieoMeHeWbAc9FkFlwA/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>

Thanks to My Blogger Trick

Pembagian Grup dan Jadwal Lengkap AFF U19 Surabaya

SURABAYA, INDONESIA

9 – 22 September, 2013

Group A 1. Laos 2. Philippines 3. Timor Leste 4. Singapore 5. Cambodia

Group B 1. Brunei DS 2. Indonesia 3. Vietnam 4. Malaysia 5. Myanmar 6. Thailand

DATE	MATCH	GRP	MATCH			TIME	VENUE
7 Sept 2013	Arrival of Teams & Officials
8 Sept 2013	Team Managers’ Meeting
9 Sept 2013	1	A	Laos	vs	Philippines	1530	Gelora Delta Sidoarjo
	2	A	Australia	vs	Cambodia	1930
10 Sept 2013	3	B	Brunei DS	vs	Indonesia	1930	Gelora Delta Sidoarjo Petrokimia Gresik Petrokimia Gresik
	4	B	Vietnam	vs	Thailand	1530
	5	B	Malaysia	vs	Myanmar	1930
11 Sept 2013	6	A	Singapore	vs	Phiippines	1530	Gelora Delta Sidoarjo
	7	A	Cambodia	vs	Laos	1930
12 Sept 2013	8	B	Vietnam	vs	Malaysia	1530	Gelora Delta Sidoarjo Petrokimia Gresik Petrokimia Gresik
	9	B	Myanmar	vs	Indonesia	1930
	10	B	Thailand	vs	Brunei DS	1930
13 Sept 2013	11	A	Cambodia	vs	Timor Leste	1530	Gelora Delta Sidoarjo
	12	A	Laos	vs	Singapore	1930
14 Sept 2013	13	B	Thailand	vs	Malaysia	1930	Gelora Delta Sidoarjo Petrokimia Gresik Petrokimia Gresik
	14	B	Brunei DS	vs	Myanmar	1530
	15	B	Indonesia	vs	Vietnam	1930
15 Sept 2013	16	A	Philippines	vs	Cambodia	1930	Petrokimia Gresik
	17	A	Timor Leste	vs	Laos	1530
16 Sept 2013	18	B	Myanmar	vs	Vietnam	1530	Petrokimia Gresik Gelora Delta Sidoarjo Gelora Delta Sidoarjo
	19	B	Indonesia	vs	Thailand	1930
	20	B	Malaysia	vs	Brunei DS	1530
17 Sept 2013	21	A	Philippines	vs	Timor Leste	1930	Petrokimia Gresik Gelora Delta Sidoarjo
	22	A	Cambodia	vs	Singapore	1530
18 Sept 2013	23	B	Brunei DS	vs	Vietnam	1930	Petrokimia Gresik Gelora Delta Sidoarjo Gelora Delta Sidoarjo
	24	B	Indonesia	vs	Malaysia	1930
	25	B	Thailand	vs	Myanmar	1530
19 Sept 2013	Rest Day / Departure of Teams & Officials
20Sept 2013	31	SF1	Winner A	vs	Runner-up B	1600	Petrokimia Gresik
	32	SF2	Winner B	vs	Runner-up A	1600	Gelora Delta Sidoarjo
21 Sept 2013	Rest Day
22 Sept 2013	33	3rd/4th	Loser SF1	vs	Loser SF2	1530	Gelora Delta Sidoarjo
	34	FINAL	Winner SF1	vs	Winner SF2	1930	Gelora Delta Sidoarjo
23 Sept 2013	Departure of Teams & Officials

Daftar Isi Blog RenvileTieft

Load...

Muji Jaya Ganesha