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(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvC_Xa-vHI/AAAAAAAACw0/qVeZI3gdWQM/s1600/Inverted.png)
  no-repeat top center; border-top: 4px solid #5F6A71; } </style> 
 <div class="container">
 <ul id="nav">
<li><a  
href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link  
2</span></a></li>
<li><a  
href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link  
4</span></a></li>
<li><a  
href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link  
6</span></a></li>
<li><a  
href="#"><span>Link 7</span></a></li>
</ul>
</div>

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(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvBJiGpo6I/AAAAAAAACwM/9lKuhGGOk3E/s1600/tableftI.png)
  no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none;
 }  #tabsI a span { float:left; display:block;  
background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvBJn6pb9I/AAAAAAAACwQ/XVWOFI_3AgE/s1600/tabrightI.png)
  no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span  
{float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; }
  #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span {
  background-position:100% -42px; } </style> <div 
id="tabsI">
  <ul>
<li><a href="#"><span>Link 
 1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvBBuaTrwI/AAAAAAAACv8/G3bPgs-Gu7U/s1600/tableftG.png)
  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;
 }  #tabsG a span { float:left; display:block;  
background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvBB8X5gTI/AAAAAAAACwA/fwleg9upasg/s1600/tabrightG.png)
  no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsG a span  
{float:none;} /* End IE5-Mac hack */ #tabsG a:hover span { color:#FFF; }
  #tabsG a:hover { background-position:0% -42px; } #tabsG a:hover span {
  background-position:100% -42px; } </style> <div 
id="tabsG">
  <ul>
<li><a href="#"><span>Link 
 1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5iiWmCI/AAAAAAAACv0/4lAk0jar62Q/s1600/tableftF.png)
  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;
 }  #tabsF a span { float:left; display:block;  
background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5jIWoBI/AAAAAAAACv4/1TJsSRUoYes/s1600/tabrightF.png)
  no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span  
{float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; }
  #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span {
  background-position:100% -42px; } </style> <div 
id="tabsF">
  <ul>
<li><a href="#"><span>Link 
 1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvA5SCr4aI/AAAAAAAACvs/z9n_NmrOa5s/s1600/tableftE.png)
  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;
 }  #tabsE a span { float:left; display:block;  
background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvA5lGRr2I/AAAAAAAACvw/691UrUgNOOA/s1600/tabrightE.png)
  no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span  
{float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; }
  #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span {
  background-position:100% -42px; } </style> <div 
id="tabsE">
  <ul>
<li><a href="#"><span>Link 
 1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvAqYEy5NI/AAAAAAAACvk/Upvw2dOoy3c/s1600/tableftD.png)
  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;
 }  #tabsD a span { float:left; display:block;  
background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvAqaCPITI/AAAAAAAACvo/6J1w2JWIlz0/s1600/tabrightD.png)
  no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsD a span  
{float:none;} /* End IE5-Mac hack */ #tabsD a:hover span {  
color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD
  a:hover span { background-position:100% -42px; } </style> 
<div  id="tabsD">
 <ul>
<li><a 
href="#"><span>Link  1</span></a></li>
<li><a  href="#"><span>Link 
2</span></a></li>
<li><a 
href="#"><span>Link  3</span></a></li>
<li><a  href="#"><span>Link 
4</span></a></li>
<li><a 
href="#"><span>Link  5</span></a></li>
<li><a  href="#"><span>Link 
6</span></a></li>
<li><a 
href="#"><span>Link  7</span></a></li>
</ul>
</div>

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(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu_vhXlxhI/AAAAAAAACvE/mtaQIkLuioQ/s1600/tableft12.png)
  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;
 }  #tabs12 a span { float:left; display:block;  
background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu_voDXE9I/AAAAAAAACvI/sVgxX67lkGc/s1600/tabright12.png)
  no-repeat right top; padding:5px 15px 4px 6px; color:#E4D6CD; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs12 a span  
{float:none;} /* End IE5-Mac hack */ #tabs12 a:hover span { color:#FFF; }
  #tabs12 a:hover { background-position:0% -42px; } #tabs12 a:hover span
 {  background-position:100% -42px; } #tabs12 #current a {  
background-position:0% -42px; } #tabs12 #current a span {  
background-position:100% -42px; } </style> <div id="tabs12">
  <ul>
<li><a href="#"><span>Link  
1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu_vcwCwaI/AAAAAAAACu8/HPBTqfggop8/s1600/tableft11.png)
  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;
 }  #tabs11 a span { float:left; display:block;  
background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu_vbDU2PI/AAAAAAAACvA/k6O6JwDg614/s1600/tabright11.png)
  no-repeat right top; padding:5px 15px 4px 6px; color:#9F9584; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs11 a span  
{float:none;} /* End IE5-Mac hack */ #tabs11 a:hover span { color:#FFF; }
  #tabs11 a:hover { background-position:0% -42px; } #tabs11 a:hover span
 {  background-position:100% -42px; } #tabs11 #current a {  
background-position:0% -42px; } #tabs11 #current a span {  
background-position:100% -42px; } </style> <div id="tabs11">
  <ul>
<li><a href="#"><span>Link  
1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_knlQKBI/AAAAAAAACu0/8LiiBZnKfsw/s1600/tableft10.png)
  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;
 }  #tabs10 a span { float:left; display:block;  
background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_k-9mnTI/AAAAAAAACu4/zgN8RBPo47g/s1600/tabright10.png)
  no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs10 a span  
{float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; }
  #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span
 {  background-position:100% -42px; } #tabs10 #current a {  
background-position:0% -42px; } #tabs10 #current a span {  
background-position:100% -42px; } </style> <div id="tabs10">
  <ul>
<li><a href="#"><span>Link  
1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu_kvE0faI/AAAAAAAACus/SzckKvt6x20/s1600/tableft9.png)
  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;
 }  #tabs9 a span { float:left; display:block;  
background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_kr6m1hI/AAAAAAAACuw/YTWQEYce98E/s1600/tabright9.png)
  no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs9 a span  
{float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; }
  #tabs9 a:hover { background-position:0% -42px; } #tabs9 a:hover span {
  background-position:100% -42px; } #tabs9 #current a {  
background-position:0% -42px; } #tabs9 #current a span {  
background-position:100% -42px; } </style> <div id="tabs9">
 
 <ul>
<li><a href="#"><span>Link  
1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-pxMSoZI/AAAAAAAACuU/PFY8xbrx6AQ/s1600/tableft6.gif)
  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;
 }  #tabs6 a span { float:left; display:block;  
background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-p0wRo5I/AAAAAAAACuY/T2KFLniEzcM/s1600/tabright6.gif)
  no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span  
{float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; }
  #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span {
  background-position:100% -42px; } #tabs6 #current a {  
background-position:0% -42px; } #tabs6 #current a span {  
background-position:100% -42px; } </style> <div id="tabs6">
 
 <ul>
<li><a href="#"><span>Link  
1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu_bd2bmRI/AAAAAAAACuk/Y174Kut0Ngs/s1600/tableft8.png)
  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;
 }  #tabs8 a span { float:left; display:block;  
background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu_bixXsgI/AAAAAAAACuo/rQ1FvEtXTdI/s1600/tabright8.png)
  no-repeat right top; padding:5px 15px 4px 6px; color:#333; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs8 a span  
{float:none;} /* End IE5-Mac hack */ #tabs8 a:hover span {  
color:#591333; } #tabs8 a:hover { background-position:0% -42px; } #tabs8
  a:hover span { background-position:100% -42px; } #tabs8 #current a {  
background-position:0% -42px; } #tabs8 #current a span {  
background-position:100% -42px; } </style> <div id="tabs8">
 
 <ul>
<li><a href="#"><span>Link  
1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu_bRCaLKI/AAAAAAAACuc/YEWujpfd-sA/s1600/tableft7.png)
  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;
 }  #tabs7 a span { float:left; display:block;  
background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu_bSCN0jI/AAAAAAAACug/0fWPrwxSe4s/s1600/tabright7.png)
  no-repeat right top; padding:5px 15px 4px 6px; color:#999; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs7 a span  
{float:none;} /* End IE5-Mac hack */ #tabs7 a:hover span {  
color:#ECB546; } #tabs7 a:hover { background-position:0% -42px; } #tabs7
  a:hover span { background-position:100% -42px; } #tabs7 #current a {  
background-position:0% -42px; } #tabs7 #current a span {  
background-position:100% -42px; } </style> <div id="tabs7">
 
 <ul>
<li><a href="#"><span>Link  
1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvBVzhRH_I/AAAAAAAACwc/wnL2j0dXKHM/s1600/tableftK.png)
  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;
 }  #tabsK a span { float:left; display:block;  
background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvBV1YKHfI/AAAAAAAACwg/3p1hsPWPSHI/s1600/tabrightK.png)
  no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsK a span  
{float:none;} /* End IE5-Mac hack */ #tabsK a:hover span { color:#FFF;  
background-position:100% -42px; } #tabsK a:hover {  
background-position:0% -42px; } #tabsK a:hover span {  
background-position:100% -42px; } </style> <div id="tabsK">
 
 <ul>
<li><a href="#"><span>Link  
1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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(http://4.bp.blogspot.com/_7wsQzULWIwo/Szu-gCY1ZzI/AAAAAAAACuE/IYEaj-Ap9Bk/s1600/tableft4.gif)
  no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none;
 }  #tabs4 a span { float:left; display:block;  
background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu-gKkyHOI/AAAAAAAACuI/NpLTAFOd2uQ/s1600/tabright4.gif)
  no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs4 a span  
{float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span {  
color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4
  a:hover span { background-position:100% -42px; } #tabs4 #current a {  
background-position:0% -42px; } #tabs4 #current a span {  
background-position:100% -42px; } </style> <div id="tabs4">
 
 <ul>
<li><a href="#"><span>Link  
1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu-fxTO5uI/AAAAAAAACt8/-Obicf3fMP0/s1600/tableft3.gif)
  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;
 }  #tabs3 a span { float:left; display:block;  
background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu-gDciBuI/AAAAAAAACuA/CQSbr-4_cGU/s1600/tabright3.gif)
  no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs3 a span  
{float:none;} /* End IE5-Mac hack */ #tabs3 a:hover span { color:#FFF; }
  #tabs3 a:hover { background-position:0% -42px; } #tabs3 a:hover span {
  background-position:100% -42px; } #tabs3 #current a {  
background-position:0% -42px; } #tabs3 #current a span {  
background-position:100% -42px; } </style> <div id="tabs3">
 
 <ul>
<li><a href="#"><span>Link  
1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu9PRHHGvI/AAAAAAAACt0/VowUBlNOh9g/s1600/tableft2.gif)
  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;
 }  #tabs2 a span { float:left; display:block;  
background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu9Pg-t39I/AAAAAAAACt4/Bc82ooHNWSA/s1600/tabright2.gif)
  no-repeat right top; padding:5px 15px 4px 6px; color:#84776B; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs2 a span  
{float:none;} /* End IE5-Mac hack */ #tabs2 a:hover span {  
color:#74675B; } #tabs2 a:hover { background-position:0% -42px; } #tabs2
  a:hover span { background-position:100% -42px; } #tabs2 #current a {  
background-position:0% -42px; } #tabs2 #current a span {  
background-position:100% -42px; } </style> <div id="tabs2">
 
 <ul>
<li><a href="#"><span>Link  
1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvBBx63ZtI/AAAAAAAACwE/lOu0RDcHs_c/s1600/tableftH.png)
  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;
 }  #tabsH a span { float:left; display:block;  
background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvBB9V8tWI/AAAAAAAACwI/rmnQz1WjK-g/s1600/tabrightH.png)
  no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span  
{float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; }
  #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span {
  background-position:100% -42px; } </style> <div 
id="tabsH">
  <ul>
<li><a href="#"><span>Link 
 1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu9PCVjbFI/AAAAAAAACts/MclSzL8Aza4/s1600/tableft1.gif)
  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;
 }  #tabs1 a span { float:left; display:block;  
background:url(http://2.bp.blogspot.com/_7wsQzULWIwo/Szu9Pd4oqxI/AAAAAAAACtw/3ldOBb2QV-g/s1600/tabright1.gif)
  no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span  
{float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7;
  } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span
 {  background-position:100% -42px; } #tabs1 #current a {  
background-position:0% -42px; } #tabs1 #current a span {  
background-position:100% -42px; } </style> <div id="tabs1">
 
 <ul>
<li><a href="#"><span>Link  
1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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(http://2.bp.blogspot.com/_7wsQzULWIwo/SzvASky0MXI/AAAAAAAACvM/lCN12ooOQ_o/s1600/tableft.png)
  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;
 }  #tabs a span { float:left; display:block;  
background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvASjsu31I/AAAAAAAACvQ/h_VW2YzIljU/s1600/tabright.png)
  no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span  
{float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#FF9834;
  } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span {
  background-position:100% -42px; } </style> <div id="tabs">
  <ul>
<li><a href="#"><span>Link  
1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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(http://1.bp.blogspot.com/_7wsQzULWIwo/Szu-pihZsRI/AAAAAAAACuM/M_WqlslWGI0/s1600/tableft5.gif)
  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;
 }  #tabs5 a span { float:left; display:block;  
background:url(http://3.bp.blogspot.com/_7wsQzULWIwo/Szu-ppvYxHI/AAAAAAAACuQ/aL8WsHpvlSo/s1600/tabright5.gif)
  no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs5 a span  
{float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; }
  #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span {
  background-position:100% -42px; } #tabs5 #current a {  
background-position:0% -42px; } #tabs5 #current a span {  
background-position:100% -42px; } </style> <div id="tabs5">
 
 <ul>
<li><a href="#"><span>Link  
1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvASpRftuI/AAAAAAAACvU/Zu86nlwjvhQ/s1600/tableftB.png)
  no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none;
 }  #tabsB a span { float:left; display:block;  
background:url(http://4.bp.blogspot.com/_7wsQzULWIwo/SzvAS5-xgjI/AAAAAAAACvY/f0YjqMbxzqY/s1600/tabrightB.png)
  no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsB a span  
{float:none;} /* End IE5-Mac hack */ #tabsB a:hover span { color:#000; }
  #tabsB a:hover { background-position:0% -42px; } #tabsB a:hover span {
  background-position:100% -42px; } </style> <div 
id="tabsB">
  <ul>
<li><a href="#"><span>Link 
 1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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(http://3.bp.blogspot.com/_7wsQzULWIwo/SzvBJ_dMfYI/AAAAAAAACwU/ROgYM1pOzzo/s1600/tableftJ.png)
  no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none;
 }  #tabsJ a span { float:left; display:block;  
background:url(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvBJ7Gdz_I/AAAAAAAACwY/o6Vlnp00pyk/s1600/tabrightJ.png)
  no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /*  
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span  
{float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; }
  #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span {
  background-position:100% -42px; } </style> <div 
id="tabsJ">
  <ul>
<li><a href="#"><span>Link 
 1</span></a></li>
<li><a  
href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link  
3</span></a></li>
<li><a  
href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link  
5</span></a></li>
<li><a  
href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link  
7</span></a></li>
</ul>
</div>

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

<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