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/AVvXsEh50EfkmzbtQW-PG-eHSc1MDkGE95An7tK4WRCxjlZkMVe2ji3sE7ic-AVyQICzcpLJa6nMKlTP4lyFubLHUVGbxxwIIJU8KY5vSbDdJgNfOYfrgWfQNK4EFgkrxHE72-IgJkEDecNRIgo/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/AVvXsEggVfSCCjBNWBzRNbgEV4Ya4t3mwKeRvT1sVGMp3lVPIb5bsbllUPhm427jWWKYE6JVHc-GPu-O9EMZbNaJRr97T5raHxnhHUxXG4bGbTks3bc_pifHBnz4IJZZld4Y3vBGaD6h3rK1qNI/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/AVvXsEjT7Rx972Ii6yM_Ln9-2kWZ7jG2IL5Uh1aJce7gzOjDu4Ct9Y-AeylmXB9Ls2J2W4wi4VKpid9HZBqTYM0kMZ1CmMolBbs6EAgA5615dgOu_bPJxHzt5NlemepeO0bsDKfYw9CocGNwW9Q/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/AVvXsEjNiy0kCqBR13vBXqNOdrLE5_H0RkZkvC-lBarYy-XL03_vnhROW4tG_AIiYg285CtOoiy87XuQatthKKuXpXEiIxl8t-kU89RsvyPupVIdYG_JB7nkUcfKJiCEumb_yjgRlomO3HdDv_k/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/AVvXsEj931hacimX4L97h_acwMZ7xcpG9mxxIxqKkfkO0tWW4tYGp8Yjr184nEXNGUBNxudzJpKOipPZhRfgKO8C7A_8xhQnZsuOOLQviLVgUZlIsiSlFhiHhB__FC4hyphenhyphentgm3N-CJ7o_KPC6xTU/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/AVvXsEjwpPI7ncs_VLEQ2wrEzoFmcRprDtxUmAq9T-rKgMUbvVtGy6levfrHusbPoL3Jpiog9i2V6YnTjlbG8AqXRYIDkOCugVkb0IOcPthtbLk2hMo1XwSO6L3fa2GfNhk0PJ8aeWeAkHW0h6I/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/AVvXsEgQPIO1KdccFBEV13OQFx5Ax3Tbz_fC5oIpfK9n2frM3d5LTh7x18drV557yx7fhrgnTQqmLeZ-emv-_r2C4-VgCV4DkWOCIQgw3JmgHp6Sq02ZozIO-y58ySC_gIaltVOHs5jtc2j1kh0/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/AVvXsEgQFZQHfMIP8W4whATs0ocj_NC9XqOHzsiMIF29ayM6BIXWWXT-C7m5fVPFttxK3rPpzBauf0LWHs-X45nqEAv4RqOtI5rGpC8qJa_BaIVEfRDk86fUwqiAGT3w6UCbetGr89Y2KkTihFg/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/AVvXsEj4JbIAMMHw3Lndlkslgt9Xk6j_rP3BLy9phy5tJFKoLe_XJgqOHsnnvCEyDSAWhAuL32z39Tp29jjFD-Z2uLlpYdin9yUnQt8C8R88hdupRr9ya5qa4U3yjNGh8aQXR2GpyPFGxnkQLCg/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/AVvXsEhuOyr6xCJwx9P01CHcTH4G8kiDxVl9vC7IVDeRB7vAMOFQM0AiveFRKKsD2V4UzICJTR0th5jGZAZSIJK2sSDnuJGsfijCwo8pWmgbe_x7FnP3hGR493uNnaR6RMQ2c6fBiOu9kLbD0mo/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/AVvXsEjXUbKiWQC0Z-SZ9ri9Xo4a85XW93i1YDfjICsM3am0JzKsT_2D6uEX7hTTmhipavVmJ6P4PO7P7MuBLdQ9xFGjlFDMfqfN5CbpfYXthn6vAV5hVhYOVWGNEzNIlTj4Lm2KRsLQUpNfgqI/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/AVvXsEjC762H8LXdynNsZpsXWeuHr8q3d-7hRJPKsd9xHKce2zUOYDUX4i1uN8xsmiBAcG2O4WiGWz3m2jFVdh7iggfQ-tp0i8GYFtWG6FVNul7dIuP6FpS6YBdYfslOwXZlWg6kMgBVA2FUiRo/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/AVvXsEgQahp9TNpl-GFrv9dHVQm810ufzfEPNMlck5pzRJBWNgpHNTjwkwnKAcsYRkL64_HBGL4prTUruDBbrU2kHVGFfuAuivPLkgjewLCAISBKxcNb-6jZsEnodJ95ig5UlWE-x501bJS8Sdw/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/AVvXsEhWJw5rnqkQ2KfZl-DenAPZpTy9wHqa_NiKDPTvDEEHAIXFgM7VdzPEZA1xHIJ6WYDLNJEj_dCssskJHF8EsB046nHm5_xWG6ji_dRVim7jhzkDFUVCLYqd2Ga1k2N_GmF0oKAPdeynm_E/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/AVvXsEidVQUQcTmsUEGaT_qLV-1v-9MYqQuXYs0rFNV7cBLmRtuz8pJPFStOKwTnhqGRf78wc3nNZ1qeF_-H4j80bIIpXBUIk7Nc0aA8IONcmQCCnVUqDjZMtC4t_MsdbkbXnO2EFNtZnG22mAM/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/AVvXsEj82s_s1_DNfJQfGUi3a31yt_wAHCBid0NM0zTmPJRnw6Ike25aG3kPYrz0iYPkXQG_cLSeb3d7Kbgz6WVD8J3fh17tzvVn42h6Q6Kq-O1W4_OIA1U8fChsuQCVZ_MW0YtbKhH_zLIya00/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/AVvXsEjYtW25ElJEkZajPJbX3XLQqcbsLxYW9Bo0L6B6qIjJl8zOYFIqgww-YiIE_-0qdKfyVbQHL5Q2q_9CeorJ9q18KmoE0p6TQYZ0JyjUqaoX2-FLnevuVttmfzwFt-OES41VFHED2dy_bIE/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/AVvXsEhXfWL1aZdONW_NJxWmT_CTVxs0s8MSPQ3buC_6W-aP_5iXhwiEB5ME3HZhir3gTW-SsG3w5n_mHZo5xI0tbB3SHNQ9qL1AnHhbSHcKXSdC6GBxFPpz3ZVBfJ3ZVxhBltFBazTYQpBDZZA/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/AVvXsEjGYGTdNpniUiLoTKWemX-r_xV9tIhIljf1vvKGtvt3f92A-EFR8uglSbX_u53Sp6O5_jb2N8ywm0K6Vth686-PJ8Ra7wnCqYN3OQsz6t7n4eaeFB8T6solwHhz6DNeyQXQ12dJgHZERGQ/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/AVvXsEiyxnBeXaZNV5JnVK1sUTL1ZIiSTus9Ub0YxQF5uoX3BqEAqWtp2EE2VgKSU6bIEPTge2zmCROXBHSsZy1fxhQK72UB3j4Soh3p6cp57HCwWQyAk_NKKeKofdRwqKNLvGODNYFNeeksA-U/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/AVvXsEhe23vuVdlUpgcaiin9fdB2Bj-Xs5SMyuuIlObyCI-ma-8D0qa2l_uDt5jwy2gyMkT2vUehhIzTHN6zBDrCttJpOotJL723yo-weRIlHc4V54dQZeuku-Is3oWZSijR2vIxJvqmNi852nI/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/AVvXsEimd9gvTGp73Mdd-cgfrR29pm0DMfOgxLwyS77zGg2c34PxGBdbxRGkbAz7201nvfggVeQmSt-BtMSPwfHY6kIJJhU9k26_W3vlFfR-kegfmcnzDn9swZVYS7e1gozNtCYaz9Ib9JWHC0M/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/AVvXsEgRappvo6nCEaj3z3fLkYg8zhEGa3Hymsh9cbEy4cn-0FciARqV801npwB7vUcyIj2zktSdH0ahgcaTV2tkfhp01L73ZJmJq7aPgNqzaqq8p4X1izwFkaRTU1DVD-2H6mGT21pXaprte1c/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/AVvXsEjdqphhLmhlUERLBHsyKvANWpd6DJl3Nrq9W2WVGPtreJJQEx5PTC-JFdG_1H5Qox6eCg-7JuHKZqx_yfFO_q-MTPID93uTvkDJyKZVwdNm25ygc6QNxlN9wqA80GI78iEr1_s1dN-ewBk/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/AVvXsEgrbQpBiDfMJQEqSputW8JrOL_YXzFRqQnBNW24DpUtHPiwS-AUDhTNz02jBwJ6B5i2A4N8ApmE6f6ENaiLLwpbBQBeYhuM7LP0MJ4iOYzOeXmfzmHy5pWlQU_r3zL0L7EMHH29n-Gsv5k/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/AVvXsEjc-D15SHU_CEPGBAV7SKmq0KHlraO_8QkUlYFn97vQ4kZxu0p74I_fP6WeFFQ-RDeaBC-sBz81l0HRowZ_zt16_IVxbrJJ_b_sj2n-LYzmcHdRApjoDxE1EtMvGQOD3O5MKZFscheOXls/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/AVvXsEhw8KPofzyNk1vOCZLaWVk7kGIX884yZO3CJHc6W3aYcMvL-OrF2_8Two-n418YTUQLcQa-ehpOG06JrEwgtUyMkxxzp50jlDe43lSX3jTaM3m7MYwbP4dTjByM01v1ArTFsU2mGsXZkv4/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/AVvXsEgtYpoQdiMrMasLELl2RH2yBwW6J8uXROb1ndqIk643pEgQoPD5lHYIpVJPhQk5Jht0gH8REMpMXbFeRmduaKybiLfieSqX0n8LjdCAFF1u3odY0nU69o4QlsmvFgeXbnh-fnUfofpiVTs/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/AVvXsEh_UIpN7VDyqTDGK0pWQbexeCecBANxSPLR2wVicALv4HmaJiESqan1SIvzt4NxNQNSQJwvakRRm-HJ4EcSW_qlu3k0Rz8DlkBvMjXEucsgvouKPtSJPTuUOu8NksOinP9TgEZckaDYuwU/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/AVvXsEjhTfhX0tNgW-wvLuMqMZ1TctcDxBdjf5j-EUtPwTKgXR4DS9czR1fh8yt_7RBXStHCL0Dq-lkkEyobh1e40PAZkXWQKVNrweAilCXWTHsv-a3wLgGS2GFe-hPhYdDU_9NFegCnd3tt0hs/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/AVvXsEiCgS8qPV56rfC579eTD_zzZWwwZ5upV1EFrUSsiHU0HeI7rBCmc2krGd3DUcSL8OV15z8SK46PUnozwV-ZT6_y2bzOhMrbkvvQWaH2Ad96YgwQqPf99vzf_4yIp1xdy9geRMdbox3_kOY/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/AVvXsEhxbozBOlQZ7_HpcseBIgYXhhoTYF-GEw7zXo8N6rqGjExdiPPaBta2F45_phQikYRYevlwWaBrYjpt4WRibpCVYtUfch4AFfeQA40R2H0rYhu8Gf82x_q4GB65hboMIl01QYFrkfyH5eM/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/AVvXsEgLHkkhmvEOt5LV9DQ9TvlUunniCWhCUzY9HKqtpjnEOeiwHFf0OkOXDNZe2yaBB-3aahwHFVAiCITywjNGn6nvpUa5herkqVM9vlBl04-GlYXvJnr1XjLrL-B3JYcFikL6JhtVBql63R4/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

<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/AVvXsEjiqGuP78FKd3cxDWB5ROq1dT2IyNv8L71oJT5HL_9oVQ55klzCNBwTXx5JBv-tFL5wT5wjAU0RUiicMy0dfb63Z0Cv2j5tVrn7hFSyJ3FpJ5J8pt2XEhUARyhqd8xuizn9wOBVry13YD8/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/AVvXsEjvajBTkUPMdlfwthyvj6cT0TABtRMNuRRN3SJVxUTBWhjfzjc2qvuLQKgVkkPb4MhPt1sHfWq8IT32FMmxry0Q39JWKSSNP7u2HlBsTaU6K25RIdaz2Uh8SFTrQI6mVceBlZI-CrL0FVg/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/AVvXsEi-AU6JdhVjvnj6f9CWj8K8HWdc76qMOkF0PIXJT7MTLGKcltfxmAgsBr2gf1rpJL2WEUxUyQOyi2SwEeVjOP1xP1tyDwEfa8z-bJpT3kg76zZpgiDTYmh3wdh6zda9LTJXpe9U1IbybyQ/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/AVvXsEjIYi2eqhkfLj23rTyd6atwVc3tWHspdFLHAAJVSEB50Q9DuhcQ58B2qpPbkFFMDQZRHwzaH3T49mgvmjwNIvfMooBMdLlPCXI0EBQYYF_2u5VM246UATT1oKvtGZNnJYdr2-SRivV1PEI/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/AVvXsEhPTUn6C-nCTAXQ6eD4DAa93MM_fjefEnweTQr8lLxq2yPH3PyLxpxw9TtmchzKYiX1YQ3iLBEtptIVF8_Ly_t0vIqNAyo3X6XXSY2NGVThrWVeD5diqADvbswXvWvjkYUaxnA6Jdnat9U/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/AVvXsEiMZfgNXD-U56yWsliCgI2OGTULtmDnEM_JuJNkoPFenk66s9i3bCHiFl3oIMT44PJm1ZkhfWeGv3bCwFRcFLXdLGQ5xkpIxXCdROKfP3ILLlDaTKD-mDhenoSP7RJcybHgLk6AsR47bcc/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/AVvXsEhrkIzlPYQIAwrv-pPrOg5uuTtYIJ7mWJGoLHHZ2Crw0d-EUygjpRWXC6IEDBlOBLXq-1M4MO70mRij8ncE8xfQeIxNe_0WrmH-aoA6Z3tl4tcH7JgyEJ8BJAQaj-VO7Y8HBVGWRnTHSgs/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/AVvXsEjjdyny0UFDFyaWGRzf8JDVcSka9hSgftWHPkPn-oo4-mRaDUON3zXVeYgfWzbzPcSPRUqrYh8iSZzP6CnnlnigmwWFwvmDjAqAkrG3acM-gu_WPjyEN0TuhQaTJ6UTKiduCafcAHptHtA/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/AVvXsEhHJwNI23ntzJwrjWtQJC5zuUlqjeV-JgkzkFlaXd0dQfIqZBxS1-j3p_oAryotJhql2x0-33pElbQANOokf4XD1aDjxUkTl0SLKFOjsFIMJXTey3csdscWGYhNeVPFkGCjsyutv-fxWg0/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/AVvXsEhd9zOf6XXwyqRTOGMUU1170uD0myEInHSQ2EIlhSUJwSitNfTjoLylLRLqn1ygY_oRuculrYhRiBCwmIKwxyW0V544-nAhPzRlm5wTrXBH3XpZM1HwzWJDL7jR0kxAvjVu8I6SGL_-uCk/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/AVvXsEidRoZVvW9-wFaAtYQKtbAX3v2vj95NcnpRjAgeJXbQBPWqFheM7KWirm6nucc51CY_nZBKEc5YJcB6K1R5js23IGmQG9vzpKzLOHBSxnjgnCz9QMy1C911W9uFTjwA57dee0uZhTjkxnU/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/AVvXsEjCMXG46w0QWhbkMbbcjB6dKADakd2RjWxBoz0TV64SxTpoOXs0AR-Hj2kFRHrISnW0GYvvFTuAZIiCttyJ8clohKvsqYIdUDPRSx0vv7ZqDeiqpkRRRZ1vGjb-sFTZY9H0Gzdio_ktC4A/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 မွာထည့္ေပးလိုက္ပါ

<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7H0Avw-k0t6MCeOf8S0ZlAqZH4b-RQxUrDlohUwDxmeVpzAMLPvBiQrVJbL_5ijmoBoQn7EseBKVFgSBFRX_3qY8c06gOv4J9dWG2-EIr6vIpMKxyhyPOXV-WcQ_YwKHvDSccZUfnXiw/s1600/netoops-menu-blogger+brown.png") repeat scroll 0 0 transparent !important; border: 1px solid #7C4B12 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://kyawkothein.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5gq8xn7QnFxyeugnm08k1ocKRSax_Dx23L5TuUrgIP-icBiNCxlj2BqOihs0CXXgjttGZjYF0geBPTxa4lM1w6UPh9upPuYL2ANk0ywBXWgYvdjMxVBkuZTir3P3v0qJWw5lv8NbiMvA/s1600/1x1juice.png" /></a><br /> <br /> <div class="noop-menu-brown"> <ul class="menu"><li><a href=" ေခါင္းစဥ္ရဲ့လင့္ထည့္ပါ"> ေခါင္းစဥ္</a></li><li><a href=" ေခါင္းစဥ္ရဲ့လင့္ထည့္ပါ"> ေခါင္းစဥ္</a></li><li><a href=" ေခါင္းစဥ္ရဲ့လင့္ထည့္ပါ"> ေခါင္းစဥ္</a></li><li><a href=" ေခါင္းစဥ္ရဲ့လင့္ထည့္ပါ"> ေခါင္းစဥ္</a></li><li><a href=" ေခါင္းစဥ္ရဲ့လင့္ထည့္ပါ"> ေခါင္းစဥ္</a></li><li><a href=" ေခါင္းစဥ္ရဲ့လင့္ထည့္ပါ"> ေခါင္းစဥ္</a></li><li><a href=" ေခါင္းစဥ္ရဲ့လင့္ထည့္ပါ"> ေခါင္းစဥ္</a></li></ul><br /> </div><br />

ျပီးရင္ 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 အမွတ္တရ