Blog ႏွင့္ပါတ္သက္တဲ့ တန္ဆာပလာမ်ား မိုးေကာင္းကင္ ေဖာင္းျပင္မွ ~ ေကာ္ပီဆရာႀကီး

ကိုေက်ာ္ကိုသိန္းထံမွာ နည္းပညာေလးမ်ားပါ။ သေဘာက်လို႔ကူးလာတာပါ က်ဳပ္လို မသိေသးသူမ်ားလည္း လြယ္ကူစြာျပဳလုပ္ႏိုင္ေအာင္လို႔ပါ။ ထပ္ဆင့္ေ၀မွ်ရင္း အသံုးျပဳစမ္းၾကည့္ၾကရေအာင္ဗ်ာ။ မူရင္းသို႔သြားရန္>> Blog မွာ အလြယ္ကူဆံုး Menu လန္းလန္းေတြထည့္ရေအာင္

မိ္တ္ေဆြမ်ား ကိုကၽြန္ေတာ္ Menu ေလးေတြတင္ေပးလိုက္ပါတယ္ ၊ အသံုးျပဳရတာလည္း အရမ္းလြယ္ပါတယ္ ေအာက္မွာ မိမိႀကိဳက္နွစ္သက္တဲ့ ပံုကိုေရြးျပီး တြ ့ျပီဆိုရင္ ေပးထားတဲ့ Code ကို Copy ကူူးျပီး Design >>> Add a Gadget >>> HTML/ JavaScript ထည့္ျပီး Save လိုက္ရင္ ရပါျပီ ခင္ဗ်ာ

MBT Navigation Menu #1

No Image Used

<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

No Image Used

<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

No Image Used

<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

No Image Used

<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/AVvXsEgobDmmfWc4Gd9OJynm1sfER7o3wpAjRDm3WSzkT08HAr4LF2xSWnsOikKE2uOFACrcFVSekv3bow5bHjXKA6wXtSm0YzVvVsnz7ajIRuzh-WT5mg2QcXKbpY1_wMX6hxo2B6PYywF8S3M/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/AVvXsEiTe37wvNQmkhVlVYbLSuQNWbqDHTMFnCvHnRPiEEKWBcWH4xjxDJtMbIdVE80GbjzC2zKobBXEy3bgtb1PcMPKLxoV1rKe0PCDNNivHaEQkED05SWt4WVGM6HQPs0BlExnX0ySmDqCUxQ/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/AVvXsEjxxzFoUwcBQlguCIV1als_jaPCBj3wFbJ2rgSY9A6F5HANm4oB1w71YPf7b__5W9GOHRqpPxqKtsNjbdqx6I6mwj68ILTkpDIG8vaK5Mz30_WwwZatnS7AT3KBNZsltzLTSaXLWUJIY0A/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/AVvXsEj5Dmh0rCAoaUYwCywFGdYt1mYjpLrcmOm6OoCMTXAsf3fHuYd3T_thcd0iNTuyuby5Hq9cRZB4cv6d1Hoo2CKByEnQAbiSbZSdHvgk1SY9gr91zCLsqhLjpX00TRXkOlGsUl0TuIZkUR0/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/AVvXsEi1OOHVv22cnh3tzkMMynLUl0oKl41hxxsEeqLKnAR19hk3gS4y4Eve2YHLGKtwog3ebr2S23vRKmoF3FkXSpVobd_Cv9K5ksVnRkxAAAzCaypiVXKnMlOUZYqsS5V3JkrmZ1fxM8nKJqw/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

CSS CODE:

<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/AVvXsEhUzDZYCSS2nAd0BASvhMwG1KxgtcwsPjNAo2kIepbCuWhJLK2ASI9iPMtoQY3R3_5OfvIpYvHDLkwci2Jp6RIU7q5kE1aSmR5lI1ID8IeuL8etrA1aQzkDzfUquNtNmYte9hxXle6bX94/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/AVvXsEhQLCI8XmHO6zOqVxqQZWrGFaXRr0bfEB0kWF3fTM78bM9VoSaAx77FNZf124udyikve_F_x2_FfNPxYp_PpGD-x7w00Uc5Z_hCDHdEow-suwCqOPYcr0pm5M8wI5mQLMxci8uZ2yC_LMk/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

No Image Used

<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/AVvXsEiFVb77jJ0t8i2sGgf29uAs5DXzid6x8dcymPMk8dI4a7lDExE2FSXG0vrT5KALVyESXRdnW1J3ilPnEhERcWXxawM-JrpAjBBmsgPlBvCC7lPrOebiqkQPOimVYBjO1Eaz_gEXfWfs4dk/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/AVvXsEh6ocgGuRT91n_-HQX483I1qbsktd7CxUV4RVx31ieiybGTQqCWgY0QwkbQUyYwCG6qB39jzfX0fsgOpykI6AmwFx_dhC2SwtsaJcTjTZoAnRFPk_r3C3mKyk3blxWwl3skacf1-kek8_g/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/AVvXsEiDnM6AAr7EfMehyphenhyphenLmoNfw4qKtd-BiulLREHPLHUSpv_nVb-NbcyhH-gwGcAGcxRvaZQkrabZ9znSX4Rh_RAAcddZk5AMFpsh8Bc3nStM21YJkRO1tzdeJHJqM6ncz5li0KV3vCpJID5TA/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/AVvXsEjfHriyQ8KpLZQU1R_m1GttRY8-r3kX1jl5KkuzQyMwzhEWdwlveq2i0LhET4YTo0k552vZqDIjFqjXjGviEmbQ7BV4RBTqTlchF84OPaCw6g2t0g-3y5trMrvevZCqTk6-6lPhloCSKRA/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/AVvXsEjN0JEQFa14H739B87wfEk5rLQc4ohQFztgjitWNni3RESFOzARu-6L3KnKNg6wCPWZ6RfCskjBvjEBvyay7m2WKT8O_zLH4pqMH5G3r-RsfFbvGuZNGwoIYvC4i4ZAQBVy9FlZzaUnuu4/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/AVvXsEhXVHtZc4hsk6L8eY-irUQ76QBQDnV0vcoUCUs2_Gwr3PbJpcQM3dNOpZ5gpB2Ngl0jtXKDitBkkpsFaOjntFvdQhZGJyvmVPvEMHA39g8V3trVRzrwSejMqE4g_YghODW1kt9PP7QtHSA/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/AVvXsEjAbACQb4eSifnCMblZc2KZ1xNOCjPd8x6T9G1W0tLUTKiyQeKyBesroHU7uFbExI7Npx8Fa2kj1AT57uTPYS_Ip58zNpqtuv6oP-HjKseTW_1g6pt-UEzjzpbkbH2c-Hj_MM7s1zt0TCg/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/AVvXsEhKYEP1fwKn0juKsoWS-73iysfj-I1eLYn8-r6utFUhs2ezPD9pW8o5Bqz4WBaOqZEQKv8GtGiQnp2lSlRrGHZrMC1ECmvWXb8YjOrXibh0Y-oVJMAkicYHmZL5E0UzfwO1NCLcB9wd-S4/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/AVvXsEiWlny7QQ-OYpwxpjLnBow3Lc6kfgMyfS4VOercn74QJibIaPBCVpdOFzSwBRvu_7yiJDqRbAZcLajDTkFUwHVo-U45ZnOFTbHKdJgFHR6uxwgMlDrVFJyQmrTlTSuV8D_MIds5xr2ZUqk/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/AVvXsEio4R3opai7UgwZY4IZeBKypUSMRzMVVK8XsOPZIo5xfdY9aLs2H-OoCJwm1mx042OCSiqJbNcVIhfO5nhaFkoxfCV3Cp1ZDkVWgvFIdBQY1U3zabcSDHPcPdvwzZqD1JmUXuYC_KU10QQ/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/AVvXsEjBH032FMlBJ2_RAuO9XJlFBIsOlIKSdJA-8bNswzVtASBuEkL149rQzf76fGz2O42d4F-dimwNvTcJe_zrPUF-Q_deyU-oI-om1ppgZrWgUcpgKXdXIZWO1hu52H2wkwety4jYQJgsXZE/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/AVvXsEgAcyR1jwZLV9s55G0C30DKQaU6J2oxBERZOhlwlENz3gJTMNlgz-2xNnJR8CtKtxgtuLt6GxNYuT8Zuu-z91DVron3EHFIc9zFcPVA5aPOeHS_ncxnLYIhDDVWMcWBnz4AS3cDcSpzYKk/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/AVvXsEiV1z5ON7r6vV8KkLwat0ybefQQDbcdibcABc9RRw5wUAv-9WZzHBswbQ9vujxyl8U3lwL9720eLbD0LztMEwRzpDChWorku3Elrg1w2Q2qbsopuu5IBke10WfOXwW30VbqcXkmvb5lafM/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/AVvXsEgo-wJsdTBb0yWgVdPMyk7ReWwusl3qq2l8orxxFWtFjAG4RC0OkIzBvaQyFLSG0JzBGfzFJV5SWZu866IJ0PqU5FeW-r87hWcrcyXylc_C9NQYNTAmbrYE0d9xIhAe_LovzrwFpPOBxCo/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/AVvXsEhlbac73ve7V81bvUUt8cVdAxNR3mheDe7wcF0iNcMSuf_4JpNCvMsE0fqUnjErEg67peQ_vPJ4_rmZMQ8dN3ewRAF5h4I8FdHWkvwW0UAIfvenGyryHvDtctpvRbl6hOUt8Dv7md0uOuM/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/AVvXsEjmM4xfb0Xr-_fZ10Iw1yLjmWjT4iMxLzmFxMC8hWMLjM7P-5FKdtXAvzlp8sVBFwxgN_BeHGQBCtj6FZOOC2fKuBrkknIKLAlTNQEC1Tw2yr6cr26ycGukFAefvwo5CG4lw4dPfra3DOc/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/AVvXsEjVZeo5kD2k3ziLUO8b54DK62huNk3RKPzWP3KB0QYwHjEB45ZNSDIQ66-x2zsYS9Wkx3Vwbd-HqspAMSpA4Mw5RP1mdG2iBPkm94_rajocAi52ZY1D08solN7eR1w_UdfTmxXVIX5ypEk/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/AVvXsEj3a3Q8o8x8rXpiZ0RrJPRaNnudPc_gHLzbOFBd1ZUUfCN5y1vzX5CuQyGhbqZtBfyy55xL0GUArKnirFXcB17bRotlkvntBZBOHXGaYlar_DQpAoqE1pMU4AxVB9IF25ZYsgvNcEvZSxg/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/AVvXsEhuTZH3j4VbmC3FVQcrY5qtpyXn39AvE9ZAn7re59dLokC_eyFbVWfmspLZhv9-3pZioZHZnLvsA9WE0zo4-ZRvusGI3K5dl4GCphJ1mVtN9ZHQClGRMvrz_kr82N8k7brn5ZGNewLEvb0/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/AVvXsEgJIjl5GcxMwC5AHeM7WeW-nOjouPZgZscfPEbmw7YTxQzd39qnUFIrD9iOH9gvB3X0Lt4WVp9oZdZ3_sv1oMHQfRjd2VGnihGjh8ad8uQMyzOYZpANFGvwzM6cGto1sa4RmNIQ1c7BEDU/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/AVvXsEhzJCPmp-ylW11mWeRnJ29Eu4TgUTWvH0GHM9pqervnjFw3fdCkDrqj_qUSngnnabgdTUxLEUI2qZ2TEF-B0i32ryQokmwgMPSxu_jBwQRBadRZ2S-wGC2__CFfHjaqodnB0Nmv4yuH1rs/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/AVvXsEji3ATYGQGpBT_mUFYMtC8NOYDEb8Rrzg8cFk88_SqmyZVrzH4ScQ-nk9F7ptfYg3A777lfqYINN8-h8R9KVZoAh4hmJyCoLnRufYItVDNeEauXrsGm8ou2O8eiidU2vS-mSbKssOeJqEc/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/AVvXsEgfJW5rjHUtF-doaPOOOuOlFslRVMlSz2MnwOD8SBjSASDXgCkMMa76QF4lGLTVaQsj9oHpkyt06kWe0ixgpsxVbRqewc_WT0wYMA94y9xgCLhx_jNBwO-Nspd8SNrL8YzOfSg6P3UBhn8/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/AVvXsEhPdXsUqE024pFmmh7FMa9XSyAw1Y6fWLjJTe7dplr_31s3rUXlxZbKL1mi0JN-dNOb2N9pon9PUGjcLTf_O_46u31K3FhuPDhEl27cWXUGGRiI3BTVm_BwD5A4_K5dpSSG1qVaGAKm92E/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/AVvXsEhbguNXWgtXyEO3Hfxv6twyzToBN8Pk7vChhD-ptfAqhpLUZmSLX8cdAR2mHTs1YjZ2mti3Q-Ziq-3SO6CQdBk9PdcOgJyPu2tCuBY787fSL5JxOTr-eCgOCVR9He9_bxh714xcTwR13j0/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/AVvXsEgswLANd6kk4eTfIFGRmExBMKPtCqhTcJYOm5CTtTMXcexVZcVqNwxzaxDsMsVWe8sGinHTbygw2dt8zvrCieJUpcRz9deYzZk0DzgZWWPlzBUzG0Cld820js90A_dtc3FrCmb2Xkabboc/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

No Image Used Horizontal Buttons

<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/AVvXsEiA2TurM4bJOv6y1OMeZchyphenhyphenzpMh_mKaz1H6e45b2iUqkHN8RG8Sl4qPNFE_spV2JV20VP0q4NIMx6auVad7yR4v9j1nLlcvdomArWynW59t3nQXUpH0dteUCONr9tkSvqjebLN3B9NMJtg/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/AVvXsEivC9PZwLSOCfsN5_6UrBeHZz_XMJ7V8QWqUZM1J6buHOSg6wbVs2uJwVcn3-SA0aus0LDYH7vUI71qzRcDlrb_PsBtyzBu1aEpejALDFe5PUEHTOnAejyHxQUUo7uFW7Flwo6G7HrjALo/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/AVvXsEj0nzHat3eaWEgva0x_yvmhIm_ZaMtEtmw-vQelUTkJC3G58OWM7CRJbzzvxjs7_FuRNEDPB7HiI7HoASyFJ4UuHQqBBboUfmnZv1vk1cVwNlN3HTaX3W6aQ37jggKMbN0wbV312QdSjy0/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/AVvXsEjR42gscHL7A4N7BlgJkaiqPbeKFhH6gdWNSbB0-2R6mMYOMEf1NWCb5XPziia_isFOAj5PP5qKYbf7eaXHWIeIgcc5RUrFurqUV3jxdpI3zmPeA1nKfIso9LnMFm2I9TDGHtMDk-fgV14/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/AVvXsEimfKS6o89oiW3Wounu79lyND9FcAy80FCQq8LUg8E_K2k0bG5pCg98AIQYJ-aiN3_ce-1s73JyGM8wxGQWUkXz0HFc0zAsoe_1mkFaxBjd7gcKGF_itzwuesEs6Y7oNwUDXVXGx7Rg4T4/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/AVvXsEibdLx_KU5Vh-aeXh9IE2T17xcDBNn9ckQPm6qATXCU5OcSKEq3JUsCVmxpJfXHo_zNHO7WXzLdWzQLEHLnJhZHJueUCnJdmEGkdDGkEE52jLXd1Eo930AeH7fjqksIX7gnBgNjxxviEhc/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/AVvXsEijlbpy4Muu2Gd5BA_WDLffgauzlZstGPreM42YtvOgDv5vR-RJ_FqARLvJv-NeOhpFKEU5RWy_Cw5FgMVh__SJxS7iEY2fI2LuiU8079LxWfykVgudzH8q-bGFeso-TeYYfexLMvXva8k/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/AVvXsEhsTVkgz8vqsMqnYm96vj_BP5eLhxqeu0zHfDtqZYoEdxpcQR3qmdyMKlGNYoIkm5recyd27rNKYuVpvyUtGzDrginRzqo7E8T8Hn_qoYfkku7Zje8_QMO4um0OcFKRm8c9Qbt1q3NyNF8/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/AVvXsEhMW6NEe4-Q7XtSHY1GoOqxXpjChX5VUr8rz76P-naO5Tu_DYHdafaB_R3MmemomB3ngxtCAUfPe5asvJEOg8EKLiQHWv-BJ46mUrCUkHCKciYS3LR1EYCj-_Sm7hW0vr-jXlyVx5bSUvM/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/AVvXsEj1bTbCJnBW-cnI-CnVforn-qrEUn66xNCqUEVpgd1S29TiMppmiLZ6Hs3xYHf9Usy0ZO7lAUkyqy4w-Vx2TE4jVMmZ61SAvgWxJqq3y_38HFtqlUN7DP6faSf7kh_7hw0paDXuJnR04Lo/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/AVvXsEgk38f4hHvkG0KYmZnKrMoZX1Z-sdqH5P7vVOYAdxNbH4IzSUDwFHZQv81GgC_NH9yn0YzwZG-RrmlR5QDBoiySOZRuGoDmO0Pk-q5TnhK0XIO7AfILnKkJalQwp7Mp_g4evQ3CLY-maNA/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/AVvXsEjLkrj3m8Gxsp-8EkjYNiTdJi8LzKqz_Y2tyqpGlquWBE1zjv7v3xwLYIWYPkx0I_-bC9QxaQ59VajWqpd2Pit00njQhfeGn2veeX1BZNN5ISAW1DH3vsmRzMZGpylNHEeqK4BPfCyWHks/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>

လင့္ဘယ္လို ့ထည့္ရမလဲဆိုတာေအာက္မွာႀကည့္ပါ

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

LINK 1,LINK2,LINK 3 ဆိုတဲ့ေနရာေတြမွာ လင့္ေခါင္းစဥ္ ထည့္ပါ # ဆိုတဲ့ ေနရာေတြမွာ ေခါင္းစဥ္ရဲ့လင့္ထည့္ပါ ၊ အားလံုးအဆင္ေျပပါေစ

အဆင္မေျပခဲ့ရင္ ေျပာခဲ့နိုင္ပါတယ္

===================================================

Blog အတြက္ drop down menu

ကၽြန္ေတာ္ drop down menu ေလးတစ္ခု တင္ျပလိုက္ပါတယ္ ရိုးရိုးေလးပါ မသိေသးတဲ့ မိတ္ေဆြမ်ားအတြက္ ျဖစ္ပါတယ္ အသံုးျပဳခ်င္ တဲ့ သူငယ္ခ်င္းမ်ား အလြယ္တကူ ယူျပီးအသံုးျပဳ ႏိုင္ေအာင္ တင္ျပေပးလိုက္ ျခင္းျဖစ္ပါတယ္...ေအာက္မွာေပးထားတဲ့ code ကို Copy ကူးျပီး .. Design >>> Add a Gadget >>> /JavaScript မွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ ။

<form><select name=”dropdownmenu” onchange=”window.open (this.options[this.selectedIndex].value,’_blank’)” size=”1″ style=”width:300px”>
<option /> -Select an option- <option value=”Your URL“/>Your Anchor Text <option value=”Your URL“/>Your Anchor Text <option value=”Your URL“/>Your Anchor Text <option value=”Your URL“/>Your Anchor Text
</select></form>

ျပီးရင္ Save လိုက္ပါ....
မွတ္ခ်က္ ။ ။ Your Anchor Text ဆိုတဲ့ ေနရာမွာ ေခါင္းစဥ္ ထည့္ပါ your url ဆိုတဲ့ေနရာမွာ ေခါင္းစဥ္ရဲ့လင့္ ထည့္ပါ -select an option - ဆိုတဲ့ေနရာမွာ မိမိေပးျခင္ေသာ ေခါင္းစဥ္ရဲ့ အမည္ေပးပါ.......မိတ္ေဆြမ်ားအားလံုးကို ခင္မင္ေလးစားလွ်က္....

========================================================

Blog မွာTree Brown Menu သံုးရေအာင္

ကၽြန္ေတာ္ ေနာက္တစ္မ်ိဳးတင္ျပေပးလိုက္ပါတယ္ မိမိႀကိဳက္တဲ့ ပံုစံကို ေရြးျပီးသံုးလို ့ရေအာင္ပါ မိတ္ေဆြမ်ား အဆင္ေျပေျပ အသံုးျပဳနိုင္ႀကပါေစ ခင္ဗ်ာ ။

ေအာက္မွာေပးထားတဲ့ Code ေတြကို Copy ကူးျပီး
Design->>>Page Elements >>> Add gadget>>> HTML/Javascript မွာထည့္ေပးလိုက္ပါ

ျပီးရင္ Save လိုက္ပါ ျပီးပါျပီ ။

=====================================================

Blog မွာ Scroll Bar Widget ထည့္ရေအာင္

ကၽြန္ေတာ္ Blog မိတ္ေဆြမ်ားကို Scroll Ber Widget ထည့္နည္း ေလးတင္ေပးလိုက္ပါတယ္ အသံုးျပဳခ်င္တဲ့မိတ္ေဆြမ်ား ေအာက္မွာ ႀကည့္ျပီးထည့္လိုက္ပါ

၁ ။ Design >>> Page Elements >>>
၂ ။ Add a page element
၃ ။ Html/javascript မွာေအာက္က Code ေတြကို ထည့္ေပးလိုက္ပါ ။

<div style="overflow:auto;width:260px;height:300px;padding:10px;">
<ul>

<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>
<li><a href="Your Link">Your Text</a></li>

</ul>
</div>

Save လိုက္ရင္ျပီးပါျပီ ။

မွတ္ခ်က္    ။ ။ ။ ျပီးရင္Your Text ဆိုတဲ့ေနရာမွာ လင့္ရဲ့ေခါင္းစဥ္ထည့္ပါ
                     Your Link ဆိုတဲ ့ေနရာမွာ ေခါင္းစဥ္ရဲ့လင့္ထည့္ပါ


width:260 px;height:300px;padding:10px    260 /300 / 10 ေနရာေတြမွာ မိမိလိုအပ္သလိုျပင္ယူလို ့ရပါတယ္

===============================================

မိတ္ေဆြမ်ားအားလံုးအဆင္ေျပပါေစ ။ ကို ေက်ာ္ကိုသိန္းထံမွ ကူးယူထားျခင္းသာျဖစ္ပါတယ္ က်ဳပ္ကေတာ့ စုေဆာင္းတတ္ရံုကလြဲၿပီး ဘာမွမတတ္သည့္အတြက္ ကူးသည့္အတတ္ေလးႏွင့္ ေလ့လာေနတယ္ဆိုပါေတာ့ဗ်ာအားလံုးဘဲ မိမိတို႔သိခ်င္တာေလးေတြကို ရွာေဖြေမႊေနာက္ႏိုင္ပါေစ။။ မိုးေကာင္းကင္ 31.10.2012 အမွတ္တရ

ေကာ္ပီဆရာႀကီး

Sunday, April 7, 2013